...

View Full Version : display: inline problem



mxb7642
08-06-2007, 08:31 PM
I have two divs nested within another div. I would like to get these 2 div's (d1, d2) to be side by side. When I do display:inline though, nothing happens. I've already tried float:left, but that moves a lot of other things around as well which I do not went. An example of the code follows:



<div id="hdiv">
<div id="d1">stuff</div>
<div id="d2>stuff</div>
</div>

div#hdiv div{
display: inline;
}


Thanks for the help.

croatiankid
08-06-2007, 08:46 PM
If you want d1 and d2 to be side by side, then put THEM to display inline (or float them), not their container. I don't see the context of this, but you may or may not need to clear the floats later as well.

mxb7642
08-06-2007, 08:49 PM
doesn't my current css do that already, although not in as direct a way as you suggest? But i'll try anyway.

Edit: I attempted making the changes listed above, but the result was the same. I used the following css:



div#id1, div#id2 {
display: inline;
}

Jutlander
08-06-2007, 08:57 PM
Float the d1 to the left and add a clearing class of some sort below them. Like this for example:


.clear {
clear: both;
}

You could call it with the <br> tag for instance:


<div id="hdiv">
<div id="d1">stuff</div>
<div id="d2>stuff</div>
<br class="clear">
</div>

mxb7642
08-06-2007, 09:44 PM
thanks that did what i needed. good to know about this clear property too

Arbitrator
08-07-2007, 04:24 AM
<div id="hdiv">
<div id="d1">stuff</div>
<div id="d2>stuff</div>
</div>

div#hdiv div{
display: inline;
}
This code should put the two words on the same line with a space in between them. However, your code contains an error; you’re missing the closing Quotation Mark (") character around the second id attribute value.


doesn't my current css do that already, although not in as direct a way as you suggest?Yes.


Edit: I attempted making the changes listed above, but the result was the same. I used the following css:



div#id1, div#id2 {
display: inline;
}
This code is erroneous. Your IDs were d1 and d2, not id1 and id2.


Float the d1 to the left and add a clearing class of some sort below them. Like this for example:


.clear {
clear: both;
}

You could call it with the <br> tag for instance:


<div id="hdiv">
<div id="d1">stuff</div>
<div id="d2>stuff</div>
<br class="clear">
</div>Instead of polluting the HTML with a clearing element, you can simply use the overflow property.

If hdiv doesn’t have hasLayout [1] already, you’ll need to trigger it to get Internet Explorer 6 to behave properly; hence the proprietary zoom property. overflow: auto triggers hasLayout in Internet Explorer 7, so no issues there.


#hdiv { overflow: auto; zoom: 1; }
#d1, #d2 { float: left; }

<div id="hdiv">
<div id="d1">stuff</div>
<div id="d2>stuff</div>
</div>


http://www.satzansatz.de/cssd/onhavinglayout.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum