Skip navigation
conorbear100
Currently Being Moderated

Inline-block problem!

Dec 30, 2012 6:36 AM

Tags: #dreamweaver #css #inline-block

Hello,

 

I am fairly new to Dreamweaver (using it for 2 months) so please bare with me.

 

I am trying to create an e-commerce website, similar to Topman and websites like that.

 

Basically I am trying to make a page on my e-commerce website that looks and works similar to this:

 

http://www.topman.com/webapp/wcs/stores/servlet/ProductDisplay?beginIn dex=1&viewAllFlag=&catalogId=33056&storeId=12555&productId=2411832&lan gId=-1&sort_field=Relevance&categoryId=207226&parent_categoryId=207169 &pageSize=20

 

It will have an 'image swap' on the left, and inline with that there will be 'details of product' box.

 

This is what I have created so far:

Screen Shot 1.png

 

On the (left), is the container for the 'image swap' and on the (right) is the container for the 'details of product'. Inside the 'details of product' container, you can see I have added more DIV tags, these will be things like 'select the colour you want', or 'select the size you want'. Before I inserted the extra DIV tags (select the colour, etc), both the containers would line up which I applied the CSS rule 'display: inline-block', however when I started to insert the extra DIV tags the 'image swap' container moved down the page and was no longer inline, as you can see in this screen shot.

 

MY QUESTION: Why is the 'image swap' container moving down the page whenever I 'inline-block' it with the 'details of product' container and then add more DIV tags to the 'details of product' container?

 

I am really sorry if the way I have wrote this is confusing and I really hope someone can help! Thanks in advance!

 

I will post the HTML and the CSS code for it below (sorry if the names of my DIV tags are confusin):

 

HTML

<div id="main_body">

 

 

<div id="image_swap_main">IMAGE SWAP MAIN</div>

 

 

<div id="product_info_container">

 

 

<div id="details_heading">DETAILS </div>

<div id="returns_heading">RETURNS</div>

<div id="product_info_main">

<div id="product_name_cost_text">product name and cost</div>

<div id="select_a_colour_text">colour?</div>

<div id="colour_box_1">colour 1</div>

<div id="colour_box_2">colour 2</div>

<div id="select_a_size_text">size?</div>

<div id="add_to_bag">add to bag</div>

 

 

</div>

</div>

 

 

CSS

#main_body {

          width: 1000px;

          height: 600px;

          text-align: left;

}

 

 

#image_swap_main, #product_info_container {

          display: inline-block;

}

 

 

#image_swap_main {

          width: 375px;

          height: 423px;

          margin-left: 115px;

          margin-top: 65px;

          border: thin solid #000;

}

 

 

#product_info_container {

          width: 372px;

          height: 423px;

          margin-left: 25px;

          margin-top: 65px;

          border: thin solid #0B0;

}

 

 

#details_heading {

          width: 185px;

          height: 23px;

}

 

 

#returns_heading {

          width: 185px;

          height: 23px;

}

 

 

#details_heading, #returns_heading {

          display: inline-block;

}

 

 

#product_info_main {

          width: 370px;

          height: 400px;

          border: thin solid #3CF;

}

 

 

#product_name_cost_text {

          width: 330px;

          height: 45px;

          margin-left: 40px;

          margin-top: 23px;

}

 

 

#select_a_colour_text {

          width: 72px;

          height: 14px;

          margin-left: 40px;

          margin-top: 23px;

}

 

 

#colour_box_1, #colour_box_2 {

          display: inline-block;

}

 

 

#colour_box_1 {

          width: 37px;

          height: 42px;

          margin-left: 40px;

          margin-top: 15px;

}

 

 

#colour_box_2 {

          width: 37px;

          height: 42px;

          margin-left: 6px;

}

 

 

#select_a_size_text {

          width: 65px;

          height: 14px;

          margin-left: 40px;

          margin-top: 35px;

}

 

 

#add_to_bag {

          width: 155px;

          height: 26px;

          margin-left: 40px;

          margin-top: 54px;

}

 

 

#product_name_cost_text, #select_a_colour_text, #colour_box_1, #colour_box_2, #select_a_size_text, #add_to_bag {

          border: thin solid #000;

}


 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points