Div inline without float
in [CSS]
|
Prev: Inline List and No Wrap problem
Next: A Pseudo Classes
From: The Ultimate Failure on 8 Apr 2010 06:20 Hi there, I've been trying to make something which lines two divs up inside a parent div, i've tried absolute positioning and floats but both end up looking something like this: http://img535.imageshack.us/img535/3082/78872756.png (where the parent div collapses) this is what I have to get a result like the above: <div style="margin: 10px auto 10px auto; width: 65%; background- color: #373737; border: 1px solid black; color: #FFFFFF; padding: 2px 0 0 3px;"> <div style="margin: 0 0 0 0; padding: 0 0 0 0; width: 70%; float: left;"> p </div> <div style="margin: 0 0 0 0; padding: 0 0 0 0; width: 30%; float: right;"> p </div> </div>
From: The Ultimate Failure on 8 Apr 2010 06:24 On Apr 8, 11:20 am, The Ultimate Failure <lee...(a)gmail.com> wrote: > Hi there, I've been trying to make something which lines two divs up > inside a parent div, i've tried absolute positioning and floats but > both end up looking something like this:http://img535.imageshack.us/img535/3082/78872756.png(where the parent > div collapses) > > this is what I have to get a result like the above: > <div style="margin: 10px auto 10px auto; width: 65%; background- > color: #373737; border: 1px solid black; color: #FFFFFF; padding: 2px > 0 0 3px;"> > <div style="margin: 0 0 0 0; padding: 0 0 0 0; width: 70%; float: > left;"> > p > </div> > <div style="margin: 0 0 0 0; padding: 0 0 0 0; width: 30%; > float: right;"> > p > </div> > </div> Oops, looks like I forgot to finish my question :/ Anyway, is there any way to adjust my dividers so that both contained divs occupy the same line, and will cause the parent to expand with them? Thanks
From: dorayme on 8 Apr 2010 06:34 In article <e99c051e-ba54-44f8-bb42-531fb0dc7df4(a)h27g2000yqm.googlegroups.co m>, The Ultimate Failure <leet91(a)gmail.com> wrote: > Hi there, I've been trying to make something which lines two divs up > inside a parent div, i've tried absolute positioning and floats but > both end up looking something like this: > http://img535.imageshack.us/img535/3082/78872756.png (where the parent > div collapses) Try giving A the style of 'overflow: hidden;' to force the parent to grow height for its children. Or, for the benefit of older IE browsers, just before the close of the A element, just before the closing tag and after all the children (B and C) have been put to bed, put in a further div, an empty one styled to 'clear: both;' -- dorayme
From: dorayme on 8 Apr 2010 06:53 In article <60763330-493d-4482-8b24-2d3f00a8de24(a)w17g2000yqj.googlegroups.co m>, The Ultimate Failure <leet91(a)gmail.com> wrote: > On Apr 8, 11:20 am, The Ultimate Failure <lee...(a)gmail.com> wrote: > > Hi there, I've been trying to make something which lines two divs up > > inside a parent div, i've tried absolute positioning and floats but > > both end up looking something like > > this:http://img535.imageshack.us/img535/3082/78872756.png(where the parent > > div collapses) > > > > this is what I have to get a result like the above: > > <div style="margin: 10px auto 10px auto; width: 65%; background- > > color: #373737; border: 1px solid black; color: #FFFFFF; padding: 2px > > 0 0 3px;"> > > <div style="margin: 0 0 0 0; padding: 0 0 0 0; width: 70%; float: > > left;"> > > p > > </div> > > <div style="margin: 0 0 0 0; padding: 0 0 0 0; width: 30%; > > float: right;"> > > p > > </div> > > </div> > > Oops, looks like I forgot to finish my question :/ > Anyway, is there any way to adjust my dividers so that both contained > divs occupy the same line, and will cause the parent to expand with > them? > <div style="width: 65%; border: 1px solid black; overflow: hidden; color: #000; background: red;"> <div style="width: 50%; float: left; color: #000; background: #cfc;">P</div> <div style="width: 50%; float: right; color: #000; background: #fcc;">P</div> </div> looks pretty lined up to my eye. The background to the parent is to show up a puzzle to amuse some perhaps. With 50% width for each child, the bg to the parent does not show, but in the 70% and 30% mix you want, it does show up. Remember it is 70 and 30% of your 65%; -- dorayme
From: The Ultimate Failure on 9 Apr 2010 03:40
On Apr 8, 11:34 am, dorayme <dora...(a)optusnet.com.au> wrote: > In article > <e99c051e-ba54-44f8-bb42-531fb0dc7...(a)h27g2000yqm.googlegroups.co > m>, > The Ultimate Failure <lee...(a)gmail.com> wrote: > > > Hi there, I've been trying to make something which lines two divs up > > inside a parent div, i've tried absolute positioning and floats but > > both end up looking something like this: > >http://img535.imageshack.us/img535/3082/78872756.png(where the parent > > div collapses) > > Try giving A the style of 'overflow: hidden;' to force the parent > to grow height for its children. > > Or, for the benefit of older IE browsers, just before the close > of the A element, just before the closing tag and after all the > children (B and C) have been put to bed, put in a further div, an > empty one styled to 'clear: both;' > > -- > dorayme The "overflow: hidden;" attribute is working nicely, thanks =] |