homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Problem with resizable width div
driving me nuts
weganer




msg:4109906
 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




msg:4116921
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved