[html/css]strechable DIV layout

**skabszo** · 04-08-2007, 07:38 AM

Hi Guys! I want to make a home website and I need to make layout which looks like that:

I can do it in div method its quite simple but i have one problem - how to make a layout which DIVS will fit to their content? please look at that image once again - I want to make such specials divs ( which will fit to their content ) in the middle of the site - i want to do it with the orange, and red div. Gray div is a top of the site, green is a menubar, violet is just a color bar, and the blue bar is a footer. I tried to make something like that:

<div>
<div></div>
<div></div>
<div>
<div style="float:left"></div>
<div style="float:left"></div>
</div>
<div></div>
<div></div>
</div>

but i am having problems with height:100% ;/ I don't need any margins in the top and the bottom so I want that site to be stick to the top and bottom frames of the screen. I used margin:0 and its okey but I dont know how to make that stupid strechable orange and red divs to their content;/ Please help me if you can

**1407** · 04-09-2007, 05:09 AM

You're talking about two different things.

1. having the page to fit the screen (height) no matter what the screen resolution is.

2. fitting the content ??? I assume you mean having enough space (height) to fit whatever you want in there ?

you want #1, #2 or... ?

also, might be a good idea to post your code (code tags) so we can see what you have so far

**skabszo** · 04-10-2007, 01:59 PM

I have sth like that:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="WebSite PRO 4.3" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" href="backup.css" type="text/css" />
  <title>xro layout 002</title>
</head>
<body>

<div id="header"><img src="images/aukcje1_02.jpg" width="759" height="227" border="0" /></div>
<div id="menu">
  <ul>
  <li><img src="images/aukcje1_04.jpg" width="277" height="45" border="0" /></li>
  <li><a href="#"><img src="images/aukcje1_05.jpg" width="72" height="45" border="0" /><li></a></li>
  <li><a href="#"><img src="images/aukcje1_06.jpg" width="99" height="45" border="0" /><li></a></li>
  <li><a href="#"><img src="images/aukcje1_07.jpg" width="156" height="45" border="0" /><li></a></li>
  <li><a href="#"><img src="images/aukcje1_08.jpg" width="155" height="45" border="0" /><li></a></li>
  </ul>
</div>
<div id="container">
  <div id="centerwrapper">
    <div id="center">
      <h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
      <p>In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.</p>
      <p>In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.</p>
      <p>In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.</p>
      <h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
      <p>In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.</p>
      <h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
      <p>In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.</p>
      <h2>Lorem ipsum sit ei sonet exerci feugait.</h2>
      <p>In vero antiopam has, cibo discere ne nec. Libris appellantur quo ad, et nec veritus tractatos. Sed suas molestiae mnesarchum ne, melius convenire ocurreret vix an. Feugiat ornatus expetendis mel te. Est timeam utroque ne, debet graecis feugait vel ut. Cu has utinam petentium theophrastus, et hinc dignissim duo. Ea ipsum suscipiantur vix.</p>
    </div>
  </div>
  <div id="left">aA bB cC dD eE fF gG hH iI jJ kK lL</div>
</div>
<div id="footer">copyleft 2006 by xro</div>
</body>
</html>

and css

Code:

* {
padding: 0;
margin: 0;
}
html, body {
  background: #fff;

}
body {
  font-family: trebuchet ms, sans-serif;
  font-size: 11px;
  color: #000;

}
a {
  text-decoration: none;
}
#header {
  clear: both;
  background: #ff7f1e;
  padding: 0;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width:759px;
  height:227px;
}

#menu {
  background: #86a43a;;
  clear: both;
  height: 56px;
  width:759px;
  overflow: hidden;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  padding: 0;
}
#menu ul {
  list-style: none;
}
#menu li {
  float: left;
}

#container {
  clear: both;
  height: 100%;
  width:759px;
  overflow: hidden;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#centerwrapper{
  float: left;
  width:100%;
}
#center {
  margin: 10px 0 -20000px 228px;
  background: #fff;
  padding: 0 10px 20000px 10px;
}
#center h2 {
  font-size: 20px;
  color: #0089af;
  line-height: 100%;
}
#center p {
  margin: 0 0 8px 0;
  text-indent: 15px;
  text-align: justify;
}
#left {
  float: left;
  width: 228px;
  margin: 0 0 -20000px -100%;
  background: #0089af;
  padding: 0 0 20000px 0;
}

#footer {
  background: #86a43a;
  clear: both;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  height: 100%;
  width:759px;
  overflow: hidden;

}

And the worst problem is that everything is OK in Firefox but IE has of course problems ( IE 6 ). As you see the blue left DIV is normally displayed in FF but it isnt working at all on IE - and I don't know why :| Christ IE is such a stupid browser :| i want to make a template for auctions - so I need to have a template which DIVS will fit to their content - You know what for?

sorry if my prev post was hm.. messy. I want to have a web which will look the same - and doesnt matter how much text/images will be in one or other div ( I mean the middle div's

)

Thread: [html/css]strechable DIV layout

Thread Tools

Display

[html/css]strechable DIV layout

Posting Permissions