0

Hi,

I want middle Div to be automatically adjusted between left and right divs. When i write a long sentence or add something into middle div, the right div is pushed down. How can i make them stable?

Thanks

<body>
<div style="height:100px; background-color:#CCCCCC">TOP
</div>
<div style="width:200px; height:800px; float:left; background-color:#E9F3DE">LEFT
</div>
<div style="width:auto; height:800px; float:left; background-color:#E7E6C7">MIDLE
</div>
<div style="width:200px; height:800px; float:right; background-color:#EEF7F7">RIGHT
</div>
</body>
5
Contributors
5
Replies
6
Views
8 Years
Discussion Span
Last Post by manishbhatt
0

i would suggest using some css to control all of those properties, it will make your life so much easier.

your problem is caused by the cumulative width of your divs being too wide for your screen size. one solution would be to give your center div a max-width to limit its width to a size that wont cause such problems.

one question, do you really want the width of your center div to vary based on the amount of text used? if so using max width is your best bet.

if i were u, i would use something that looks like this to create a three column styled sheet:

<style type="text/css">
#page {
width:900px;
margin-left:auto;
margin-right:auto;
}

.left {
width:220px;
float:left;
}

.center {
width:460px;
float:left;
}

.right {
width:220px;
float:left;
}
</style>
<html>
<div id="page">

<div class="left">
</div>

<div class="center">
</div>

<div class="right">
</div>

</div>
</html>

this will create the same basic effect of three columns, but they will always be the same size and should be easier to use as a site wide design...

0

I want all page to be filled from left to right. I don't want already defined width.
Thanks

0

First of all, stop using pixels. Pixels freeze your page to work for only one screen resolution.

Use percent, and use points for font sizes.

Put 0 margins, borders, and padding on the divs that are using percents.

Text can not be placed directly inside a div. It must be inside another container, such as p.

0

Hi veledrom, for your own good try keeping your css external, or at least in the head. To move those divs I would use some positioning:

Beware! This code is not tested.

<style type="text/css">
.right{
background-color:green;
height:auto;
width:33%;
position:fixed;
left:0%;
}
.left{
background-color:green;
height:auto;
width:33%;
position:fixed;
left:0%;
}
.center{
background-color:green;
margin:0 auto;
height:auto;
width:auto;
</style>

Naturally, you will have to apply the classes, like so:

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.