Problem with resizable width div

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with resizable width div

driving me nuts

weganer

12:10 am on Apr 5, 2010 (gmt 0)

I'm trying to make 3 divs ( a left menu, a content area and a right menu or something ). The content area in the middle needs to have its width changed as the browser window size changes. Thats also for different resolution screens. But I can't do it.

It's something like this [pichau.com.br...] the main content area stretches if you resize your window.

I've tried everything I could, like setting the width to 100%, setting a min-width and max-width, messing with the positioning, but nothing seems to work.

I obviously googled it and none of the solutions given to the people with the same problem worked with me.

Now I can't finish my site because thats a vital content area of it.

Any help is appreciated

webeno

3:14 pm on Apr 16, 2010 (gmt 0)

i would say setting the with to 100% is only one part of the game, after that you'll have to make sure that the sub-tables are given different % values according to your needs.

as i don't like tables and it's actually not the recommended way of positioning block elements, i would use float instead that pretty much solves this problem:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>

<style type="text/css">
<!--
body, div { margin: 0; padding: 0 }
body { text-align: center }
#mainWrapper{ width: 100% }
#divLeft { float:left; background-color: red; width: 100px; }
#divCenter { float: left; background-color: #eeeeee }
#divRight { float: right; background-color: green; width: 100px; }
-->
</style>
</head>

<body>
<div id="mainWrapper">
<div id="divLeft">Left box</div>
<div id="divCenter">Some text</div>
<div id="divRight">Right box</div>
</div>
</body>
</html>

By not giving the width attribute to the divCenter selector, you will basically make sure it's always taking up the whole central space of the page. You may set minwidth here if needed.