Member Avatar for veledrom

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
  • 128 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by manishbhatt

Recommended Answers

All 5 Replies

Member Avatar for thacravedawg

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...

Member Avatar for veledrom

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

Member Avatar for MidiMagic

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.

Member Avatar for ccube921

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.