PDA

View Full Version : CSS: Divs next to each other



Freduboy
May 13th, 2010, 01:26 PM
How do I get two Divs next to each other?
If i put


float:left;

on one and


float:right;

on the other theres a gap between them :/
And if i put


float:left;

on one, and


float:none;

on the other theres no gap but its not in the center :/
How do I get two divs exactly next to eachother and exactly in the center?

effpeetee
May 13th, 2010, 01:31 PM
Your enquiry is too general. We need to see what code you have got already.

There is a lot of help here (http://www.exitfegs.co.uk/Sources.html). Use the Search box.

Another fine resource here (http://bonrouge.com/3c-hf-fluid-lc.php).

Frank

Freduboy
May 13th, 2010, 01:39 PM
Here how it looks like (http://frogle.webuda.com/symbsoft/) you can get the source code there. and it should look like this :s (http://frogle.webuda.com/symbsoft/images/textbox.png)

abduraooft
May 13th, 2010, 01:39 PM
Apply float and a suitable width to the first one and then apply margin-left/right depending upon the the direction of float. Take a look at http://bonrouge.com/2c-hf-fixed.php to get an example.

Freduboy
May 13th, 2010, 05:05 PM
And when I have a 10px padding, there is a 10px gap around the div :/

abduraooft
May 13th, 2010, 05:11 PM
And when I have a 10px padding, there is a 10px gap around the div :/ That doesn't make any sense. Please post your complete code and explain the issue.

Freduboy
May 13th, 2010, 05:26 PM
#text1 {
width:816px;
height:278px;
margin-left:auto;
margin-right:auto;
background-image:url("images/text1.png");
background-repeat:no-repeat;
padding:10px;
When I have a padding, there is a space around the div, which is as thick as the padding, in my case 10px.

thresher
May 13th, 2010, 05:39 PM
The way I'd code this page is to have the three divs you want next to each other held in a larger div.
The HTML I'd use is:



<div id="master_div">
<div id="top_left">

</div><!--end of top_left-->
<div id="top_right>

</div><!--end of top_right-->
<div style="clear:both;"></div>
<div id="bottom">

</div><!--end of bottom-->
</div>


Then the CSS:



#top_left {
float: left;
width: 410px;
height:278px;
background:url("YOUR IMAGE NAME HERE") top no-repeat;
}

#top_right {
float: left;
width: 406px;
height:278px;
background:url("YOUR IMAGE NAME HERE") top no-repeat;
}

#bottom {
width: 816px;
height:278px;
background:url("YOUR IMAGE NAME HERE") top no-repeat;
}


Something like that anyway.

thresher
May 13th, 2010, 05:40 PM
When I have a padding, there is a space around the div, which is as thick as the padding, in my case 10px.

This is because padding is on top of width. If you want 10px padding, remove 10px from your width. If you have 10px padding on both sides (left & right) remove 20px from your width.
Remember to do the same for height.

Freduboy
May 13th, 2010, 06:01 PM
The way I'd code this page is to have the three divs you want next to each other held in a larger div.
The HTML I'd use is:



<div id="master_div">
<div id="top_left">

</div><!--end of top_left-->
<div id="top_right>

</div><!--end of top_right-->
<div style="clear:both;"></div>
<div id="bottom">

</div><!--end of bottom-->
</div>


Then the CSS:



#top_left {
float: left;
width: 410px;
height:278px;
background:url("YOUR IMAGE NAME HERE") top no-repeat;
}

#top_right {
float: left;
width: 406px;
height:278px;
background:url("YOUR IMAGE NAME HERE") top no-repeat;
}

#bottom {
width: 816px;
height:278px;
background:url("YOUR IMAGE NAME HERE") top no-repeat;
}


Something like that anyway.

Well this didnt work :/
But ty anyway


This is because padding is on top of width. If you want 10px padding, remove 10px from your width. If you have 10px padding on both sides (left & right) remove 20px from your width.
Remember to do the same for height.

This did work :D ty