Inline-block problem!
Dec 30, 2012 6:36 AM
Tags: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:
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:
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;
}
