ansaurus

Question

Expand div to max width when float:left is set

Answer 1

+1 A:

Elements that are floated are taken out of the normal flow layout, and block elements, such as DIV's, no longer span the width of their parent. The rules change in this situation. Instead of reinventing the wheel, check out this site for some possible solutions to create the two column layout you are after: http://www.maxdesign.com.au/presentation/page_layouts/

Specifically, the "Liquid Two-Column layout".

Cheers!

CleverCoder 2009-06-19 13:26:33

kinda looks like what i want, they dont use the float but a margin of the right element instead, since i got no other solution i might have to try it that way even if i actually dont like it

Flo 2009-06-19 13:43:20

Answer 2

+6 A:

Hope I've understood you correctly, take a look at this:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Content with Menu</title>   
    <style type="text/css">
      .content .left{
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right{
        margin-left:100px;
        background-color:red;
      }

    </style>       
    </head>
    <body>   
    <div class="content">
      <div class="left">
        <p>Hi, Flo!</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
      </div>
    </div>
    </body>
</html>

merkuro 2009-06-19 13:27:39

The question states "both floats are neccesary".

Crescent Fresh 2009-06-19 13:31:24

Yes, you are right and I agree. However I think Flo only mentioned this, because he thinks they are both! needed to get the desired layout and therefore my alternative solution.

merkuro 2009-06-19 13:38:25

@merkuro: good point. I agree, ".right" does not need to be floated to get the desired effect. @Flo: can you confirm, must the content div be floated? Like for other reasons?

Crescent Fresh 2009-06-19 13:41:03

might work i will try a little around with that, you got that reason right, and the float is nicer, but i figure it just wont work

Flo 2009-06-19 13:44:53

Ahh jeah and i again see the reason why i changed it to float:Ie7 and Firefox do fine, but ie 5.5 and ie 6 start the margin at the right edge of the left div, so it has a 236px (the real width, 100 was an example) gap between both divs

Flo 2009-06-19 13:57:33

ok as i dont really need a padding here i just let the margin be. The only Problem then is, that the first subdiv of the right div needs has a padding issue, but even if its dirty i will just use an empty div for left-padding (others work). css is sick.

Flo 2009-06-19 14:20:22

Thank you very much, I've been looking for it for ever!

Alex 2010-09-18 13:23:27

Answer 3

A:

Hi,

With a standard resolution of 1280x1024, 100px is about a 7% of the width, so you can rewrite it like:

<div style="width: 7.8%; float: left;">Menu</div>
<div style="width: 92.2%; float: right;">Content</div>

Regards.

ATorras 2009-06-19 13:31:37

And if i resize the window or have another resolution, that sucks?!

Flo 2009-06-19 13:41:16

ansaurus

tags:

views:

answers:

Expand div to max width when float:left is set

related questions