CSS Forum

**empiresolutions** · 10-04-2007, 02:54 PM

In the code below you see i have a container div. Inside of that are two divs. I would like the two divs to align side-by-side and valign to the top of the container div.

I can get them side-by-side, but not to valign both to top. What am i doing wrong?

Code:

<div class="" style="width:530px; border-width:1px; border-style:solid; border-color:#ccbbaa; text-align:left; padding:10px;">

    <div class="" style="position:relative; z-index:7; width:300px;">

        Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

    </div>

    <div class="" style="position:relative; z-index:6; width:200px; left:320px;"><IMG src='test.jpg' width='125'></div>

</div>

**LadynRed** · 10-04-2007, 04:01 PM

Why do you have them both set to position:relative with z-indexing ? This is not the best way to do what you want, in fact, IE has a nasty z-indexing bug with relative positioning, so getting rid of that is a good idea.

If you want the divs side by side, float them both left, they should align at the same level under the normal document flow. Adjust as needed with margins and padding, just do NOT put a left margin on a left float and vice versa as you will run afoul of yet another IE 6 bug. It's fixable, but if you can avoid it completely that's even better.

**empiresolutions** · 10-04-2007, 05:55 PM

thanks for the info about relative positioning and z-index, i have updated my scripts.

I tried to add float:left; to the divs. its did not work. now the image is outside the main container.

Code:

<div class="" style="width:530px; border-width:1px; border-style:solid; border-color:#ccbbaa; text-align:left; padding:10px;">

    <div class="" style="position:relative; width:300px;  float:left;">

        Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

    </div>

    <div class="" style="position:relative; width:200px; left:320px; float:left;"><IMG src='test.jpg' width='125'></div>

</div>

**LadynRed** · 10-04-2007, 10:03 PM

Try it this way:

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>

<style type="text/css">

</style>
</head>

<body>
<div class="container">

<div class="left">

<p> Epsum factorial non deposit quid pro quo hic escorol.
Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus
unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo
contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus
stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad
infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit
quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre
Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e
pluribus unum.</p>

</div>

<div class="right"><IMG src='test.jpg' width='125'>
</div>
<br class="brclear" />
</div> 
</body>
</html>

**empiresolutions** · 11-14-2007, 04:38 AM

Thanks LadynRed, this is just what i was looking for.

**empiresolutions** · 11-14-2007, 04:40 AM

This solution for this problem can be found using either of the suggestions found here,

http://www.webmaster-talk.com/css-fo...tml#post470469
http://www.dhtmlgoodies.com/forum/vi...hp?p=9986#9986

**LadynRed** · 11-14-2007, 04:15 PM

Unless you changed something, the use of display:table isn't necessary.