homepage Welcome to WebmasterWorld Guest from 54.227.171.163
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 / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Trouble with layout with DIV's
TomVDJ



 
Msg#: 4310753 posted 1:29 pm on May 11, 2011 (gmt 0)

Hello, I'm new here, and also new in making web layouts with div's (always used tables before). I'm trying to create this layout with divs:

1. The width of the site content (= width of top banner) is fixed (900 px). The empty spaces left and right each take up 50% of the space.
2. The top banner has a fixed height (100 px).
3. The menu has a fixed width (150 px) but height resizes with the browser.
4. The illustration fields have fixed height (20 px) and fixed width (750 px).
5. The content part would have to be a div that resizes with the browser, with inside this div an iframe that also resizes (in height) with the browser, so that the scrollbar (when needed) appears at the content. I was planning to create the space between the content div (with background image) and Iframe with padding.

This illustration below should clarify my explanation.

I'm really having trouble achieving this layout with divs. Can someone help me out here?

Link to schema of what I want to realize. [webdesignforum.com]

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4310753 posted 4:50 pm on May 11, 2011 (gmt 0)

What have you done so far? (Pared down versions of the HTML and CSS please, most will ignore huge code dumps.)

TomVDJ



 
Msg#: 4310753 posted 7:20 am on May 12, 2011 (gmt 0)

This is my start:

<html>
<head>
<title>Test</title>

<style type="text/css">
body {
margin:0;
padding:0;
height:100%;
text-align:center;
}

#wrapper {
padding:0;
width:900px;
height:100%;
background:#eeeeee;
}

#header {
background:#dddddd;
height:100px;
}

#menu {
float:left;
width:150px;
height:100%;
background:#cccccc;
}

#illustrationtop {
background:#bbbbbb;
float: right;
width:750px;
height:20px;
}

#illustrationbottom {
background:#aaaaaa;
float: right;
width:750px;
height:20px;
}

#content {
background:#999999;
float: right;
width:750px;
height:100%;
}


</style>

</head>

<body>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="illustrationtop"></div>
<div id="content">
<iframe src="blah.html" width="100%" height="100%">
</div>
<div id="illustrationbottom"></div>
</div>
</body>
</html>


Biggest problem I have is the content part. The 100% is not "100% of the remaining space", but just "100% of the browser space", resulting in scrollbars I don't want. Also the bottom illustration part is not showing (overlapped by the content part?)

Additional question: is the centering of the wrapper div done properly, or should I use another technique instead of a text-aling in de body?

If Iframe is not the way to go, what can i use instead? I'd like to have one "frame" page and if a link in the menu is clicked, that another page is send to the Iframe. So that's the reason I choose this. But if there's a better way, please let me know. Thanks in advance for all the help.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4310753 posted 1:01 pm on May 12, 2011 (gmt 0)

First, you'll want to add a DOCTYPE to make sure the browser isn't in quirks mode. That will save you massive headaches when trying to make it cross-browser:

<!DOCTYPE html>


Next, you'll want to add margin: 0 auto; to your wrapper to get it centered in most browsers.

TomVDJ



 
Msg#: 4310753 posted 12:49 pm on May 13, 2011 (gmt 0)

ok, added

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Is there anybody who can help me out with the div layout?

TomVDJ



 
Msg#: 4310753 posted 1:12 pm on May 13, 2011 (gmt 0)

I tried a new approach where I will integrate the layout graphs in the divs. This is what I have now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background:#ffffff;
text-align:center;
}
div#wrapper{
background:#eeeeee;
width:900px;
height:auto !important;
height:100%; /* IE6: treaded as min-height */
min-height:100%;
margin:0 auto;
}
div#header{
float:top;
background:#bbbbbb;
width:900px;
height:100px;
margin:0 auto;
}
div#menu{
display: inline; /* Workaround IE6 floating-margin bug */
float:left;
background:#dddddd;
width:200px;
}
div#topillustration{
display: inline; /* Workaround IE6 floating-margin bug */
background:#aaaaaa;
float:right;
width:700px;
height:20px;
}
div#content{
display: inline; /* Workaround IE6 floating-margin bug */
background:#cccccc;
float:right;
width:660px;
min-height:100%;
padding:10px;
text-align: justify;
margin: 0px 10px;
}
div#bottomillustration{
display: inline; /* Workaround IE6 floating-margin bug */
background:#aaaaaa;
float:right;
width:700px;
height:20px;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="menu">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
<div id="topillustration"></div>
<div id="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<div id="bottomillustration"></div>
</div>
</body>
</html>


Problem here is that the background (wrapper) is not stretched in firefox when the screen is sized down in height and a scrollbar appears: when you scroll to the bottom of the page, you see that the wrapper stops before the content stops. What can I do about that?

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4310753 posted 5:54 pm on May 13, 2011 (gmt 0)

Clear it. :-) add

.clear-div { clear: both; }

and

<div id="bottomillustration"></div>
<div class="clear-div"></div>
</div>
</body>
</html>

Seemed to put a stop to that nonsense. :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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