CODEWITHSUNDEEP
csshtml
Andreas Eriksson
Andreas Eriksson

Reputation: 9027

HTML/CSS Div placing

Yo. There's a tendency in placing divs to follow each other vertically, but what i'm trying to accomplish right now is to is basically to place a number of divs (two) inside a parent div like so:

<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>

And i'd like to place 'anotherone' just to the right of 'onediv'. Sadly, float:right is pretty much ruining the layout with the divs popping out of their parent divs and whatnot. Any suggestions are welcome.

Edit: It might be worth noting that the parent div and 'anotherone' has no height elements at all, with 'onediv' planned to be thought as the "height support" div, allowing the contents of 'anotherone' to make the parent div larger at will.

Edit again: Here's the CSS for the specified stuff:

.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
    {
        width: 20%;
        margin: 5px;
        border: solid black 1px;
        height: 180px;
    }
.secondchild
    {
            width: 60%;
            border:solid black 1px;
            margin: 5px;
    }

Upvotes: 1

Views: 2274

Answers (6)

rossisdead
rossisdead

Reputation: 2098

Try this:

<div id="parent">
    <div id="onediv" style="float:left;"></div>
    <div id="anotherone" style="float:left;"></div>
    <div style="clear:both;"></div>
</div>

Upvotes: 2

Kevin
Kevin

Reputation: 13226

#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }

Upvotes: 0

s1mm0t
s1mm0t

Reputation: 6095

You certainly need to specify a width as indicated in @Kevin's answer to get the layout you described, simply specifying float left/right will not have the desired effect. Try specifying the width in pixels rather than a percentage. Failing that or if that's not appropriate for you, I think you possibly need to specify the width of the outer div (through css if you like).

Upvotes: 1

Martin Konecny
Martin Konecny

Reputation: 59601

Just use the <span> tag. Its the equivalent of except it doesn't start a new row.

Upvotes: -1

scunliffe
scunliffe

Reputation: 63588

I think this is what you want (note the re-ordering of DOM elements):

<div id="parent">
  <div id="anotherone"></div>
  <div id="onediv"></div>
</div>

/*CSS*/
#anotherone{
  float:right;
  width:50%;
}
#onediv{
  float:left;
  width:50%;
}

Note, if this is what you want, IE6 will still mess it up. ;-)

Upvotes: 1

jeroen
jeroen

Reputation: 91734

You can float both inner divs and give the outer div an overflow so that it grows with the inner divs.

Example:

#parent {
    overflow: hidden;
}
#parent div {
    width: 50%;
    float: left;
}

Upvotes: 2

Related Questions