[RESOLVED] [2008] DIV and CSS issue
Hi!
I have a problem with divs and css. I can't seem to make it work properly.
need the following
1) A frame div
2) 4 container divs that have the following properties (in regard to the frame
1) width 40 % height 40 % (upper left)
2) width 60 % height 60 % (upper right)
3) width 60 % height 40 % (bottom right)
4) width 40 % height 60 % (bottom left)
I can't seem to make this work, I have experiemented a lot but so far I haven't found a solution to this...
Anyone wanna give it a try? Im not sure what is best in the css to use classes or brackets #?
kind regards
Henrik
Re: [2008] DIV and CSS issue
I am sure there a several ways to do this. I would use this code but it may depend on the rest of the web page.
2 divs with a total Width of 100% doesn't leave any room for Margins, Padding or Borders. As soon as you add any one of those styles the right div will drop below the left div.
There is no "best" when it comes to using a named style or a style for a specific element Id.
Code:
<html>
<head>
<style type="text/css">
body{background-color:gray;}
#wrapper{width:1024px;height:768px;}
#upper{height:40%;background-color:whitesmoke;}
#lower{clear:both;height:60%;background-color:orange;}
.left{width:40%;float:left;}
.right{width:60%;float:left;}
</style>
</head>
<body>
<div id="wrapper" >
<div id="upper">
<div class="left">
Upper Left
</div>
<div class="right">
Upper Right
</div>
</div>
<div id="lower">
<div class="left">
Lower Left
</div>
<div class="right">
Lower Right
</div>
</div>
</div>
</body>
</html>
Re: [2008] DIV and CSS issue
I misread the different width/height values for each section. Try this instead which separates the wrapper div into Left/Right sections instead of Upper/Lower as above.
Code:
body{background-color:gray;}
#wrapper{width:1024px;height:768px;}
#left{float:left;width:40%;height:100%;}
#right{float:left;width:60%;height:100%;}
#left .upper {height:40%;background-color:pink;}
#left .lower {height:60%;background-color:blue;}
#right .upper {height:60%;background-color:pink;}
#right .lower {height:40%;background-color:blue;}
</style>
</head>
<body>
<div id="wrapper" >
<div id="left">
<div class="upper">
Upper Left
</div>
<div class="lower">
Lower Left
</div>
</div>
<div id="right">
<div class="upper">
Upper Right
</div>
<div class="lower">
Lower Right
</div>
</div>
</div>
</body>
</html>
Re: [2008] DIV and CSS issue
Thanks!! It works really good!
Ahh yes I simply forgot about margins. I will reduce the width and height to leave room for them.
Kind regards
Henrik
