Dividing site into 2 columns with textwrap

StackOverflow https://stackoverflow.com/questions/15934833

  •  03-04-2022
  •  | 
  •  

Question

This is my admin panel and I want to divide it into 2 columns with divs. The left div is a menu and has this style set:

#menu_left{
position: fixed;
float: left;
width: 300px;
height: 100%;
top: 0;
left: 0;
background: #666;
color: white;
}

The right one is the content and has this style:

#content{
text-wrap: unrestricted;
float:left;
width: 100%;
    left: 300px;
}

It doesn't work as it should work, I want it to wrap the text, but it doesn't. Tell me also please, if there is any faulty style setting.

Oh the html:

<body>
    <div id="menu_left">
        <h1>Menu</h1> <hr />
    </div>
    <div id="content"></div>
</body>
Was it helpful?

Solution

You have width 100% on content, which makes it stick out 300px to the right of the window, because of the width of #menu_left. You should make this some pixel value, or change #menu_left to a % width, say 20%, then content could be 80% and they would fit nicely.

Plus you should remove left: 300px; from #content, it will already go where you want it to because of the float: left;.

OTHER TIPS

Just clear out these lines and you should be good to go.

#menu_left{
position: fixed; <--don't need
float: left;
width: 300px;
height: 100%;
top: 0; <--don't need
left: 0; <--don't need
background: #666;
color: white;
}

#content{
text-wrap: unrestricted; <--don't need (you really want to break letters in the same word?)
float:left;
width: 100%;
left: 300px; <--don't need
}

Using a pre-made system makes a lot more sense than trying to start from scratch. I would recommend using a css system like grid960 http://960.gs/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top