...

View Full Version : CSS: Divs next to each other



Freduboy
05-13-2010, 12: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
05-13-2010, 12: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
05-13-2010, 12: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
05-13-2010, 12: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
05-13-2010, 04:05 PM
And when I have a 10px padding, there is a 10px gap around the div :/

abduraooft
05-13-2010, 04: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
05-13-2010, 04: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
05-13-2010, 04: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
05-13-2010, 04: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
05-13-2010, 05: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum