[RESOLVED] [2008] DIV and CSS issue

**MrNorth** · Mar 2nd, 2009, 10:42 AM

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

**brucevde** · Mar 2nd, 2009, 01:24 PM

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>

**brucevde** · Mar 2nd, 2009, 01:42 PM

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>

**MrNorth** · Mar 3rd, 2009, 03:23 AM

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

Thread: [RESOLVED] [2008] DIV and CSS issue

Thread Tools

Display

[RESOLVED] [2008] DIV and CSS issue

Re: [2008] DIV and CSS issue

Re: [2008] DIV and CSS issue

Re: [2008] DIV and CSS issue

Posting Permissions