CSS help

sniffy · 23 Jul 2010 at 01:39

Hey guys,

I'm trying to achieve the following with CSS:

I'm unable to get divs 4 and 5 to vertically expand with div 1. Div 1 doesn't have a fixed height as it expands with the content. Is anyone able to knock-up a very basic implementation of the above? I would be very grateful, it's driving me mad

Thanks

sparkey196 · 23 Jul 2010 at 05:23

You're lucky i cant sleep. Note that overflow: auto is the important bit.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nifty New XHTML document</title>
<style>
body {height: 50%}
div {overflow:auto; background: red;}
.container{width: 100%}
.container div {height: 100%; position: relative; display:block; float:left}
#div1 {background: #000; color: #fff, width: 60%}
#div5, #div4 {width: 20%}
#div2, #div3 {height: 20%; width: 60%; margin: auto}
</style>

</head>

<body>

<div id="div2">div 2</div>
<div class="container">
<div id="div5">div 5</div>
<div id="div1"><p>div 1</p><p>div 1</p></div>
<div id="div4">div 4</div>
</div>
<div id="div2">div 2</div>
</body>

gord · 23 Jul 2010 at 09:29

Code:

#div1 {background: #000; color: #fff; width: 60%}

Fixed.

sniffy · 23 Jul 2010 at 18:03

Legends, thanks a lot