Help with layout!?

iPixel · September 20, 2012

Hey guys, so i'm not terrible at CSS however my biggest hardship is setting up layouts. Positions - margins - padding - top/left/etc... mess with my head. And i rarely get what i want.

Here's the code i have, so you can kind of get a clue of what i'm trying to accomplish. Also attached is a photo of what i want the end result to look like.

Basically, i need a header, on the left side i need 2 divs and 1 div on the right side. The aqua background however is the background for all, and the right side needs to be moved down a little. I hope i'm being clear, as i suck at explaining things. Also, they key part is that the bottom left and right columns fill 100% of the remaining space. Seeing my code should help explain further what I was trying to accomplish.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
* { padding:0px; margin:0px; }

html, body { width:100%; height:100%; max-height:100%; min-height:100%; }

#wrapper
{
	width:100%;
	max-width:100%;
	height:100%;
	min-height:100%;
	max-height:100%;
	background:#e7e7e7;	
}

#header
{
	position:relative;
	width:100%;
	height:50px;
	background:#515757;	
}

#subwrapper
{
	position:relative;
	width:100%;
	height:100%;
	background:#0CC;	
}

#leftTop
{
	width:225px;
	height:85px;
}

#leftBottom
{
	width:225px;
	height:100%;
	background:#CCC;	
}

#rightSide
{
	position:absolute;
	float:right;
	width:1280px;
	height:100%;
	background:#e7e7e7;	
}
</style>
</head>
<body>

<div id="wrapper">

<div id="header">
    header
    </div><!-- //header -->
    
    <div id="subwrapper">
    
    	<div id="leftTop">
        id
        </div><!-- //leftTop -->
        
        <div id="leftBottom"-->
        nav
        </div><!-- //leftBottom -->
        
    <div style="clear:left;"></div>
        
        <div id="rightSide">
        content
        </div><!-- //rightSide -->
    
    </div><!-- //subwrapper -->

</div><!-- //wrapper -->

</body>
</html>

Thanks VERY much!

cutielou22 · November 13, 2012

This is what I have so far to help you out . .

<style>
* { padding:0px; margin:0px; }
html, body { width:100%; height:100%; max-height:100%; min-height:100%; }
#wrapper {
float: left;
overflow: hidden;
   width:100%;
   max-width:100%;
   height:100%;
   min-height:100%;
   max-height:100%;
   background:#e7e7e7;  
}
/* Header */
#header {
   position:relative;
   width:100%;
   height:50px;
   background:#515757;
padding: 5px;
}

/* Middle */
#subwrapper {
width: 100%;
height: 100%;
position: relative;
background:#0CC;
}
#subwrapper:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {padding: 5px 0 0 240px;}
/* Left Sidebar */
#leftTop {
float: left;
margin-left: -100%;
margin-bottom: 50px;
width: 225px;
height: 85px;
padding: 5px;
}
#leftBottom {
float: left;
width: 225px;
margin-left: -100%;
height:100%;
background:#CCC;
padding: 5px;
}
</style>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">
 header
</div><!-- #header-->
<section id="subwrapper">
 <div id="container">
  <div id="content">
   content
  </div><!-- #content-->
 </div><!-- #container-->
 <aside id="leftTop">
  id
 </aside><!-- #leftTop -->
 <aside id="leftBottom">
  nav
 </aside><!-- #leftTop -->
</section><!-- #subwrapper-->
</div><!-- #wrapper -->
</body>
</html>

Sign In

Help with layout!?

Recommended Posts

iPixel

Link to comment

Share on other sites

cutielou22

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information