main site

Online Portfolio and Resource Blog Online Portfolio and Resource Blog

Posts Tagged ‘DIV’

CSS: Make a Div Height 100% of the Screen

02Dec 2011

Many designers have come across this issue several times in their career. How do you make your div fill up the entire height of your browser window? The answer is very simple, but not so obvious.

HTML

<div id="main">
     <div class="content">
                A div thats height is %100 of the screen!
     </div>
</div>

CSS

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: url("bg.gif");
	font-family: Arial, Verdana, sans-serif;
}
#main {
	background: #f1f1f1;
	width: 960px;
	margin: auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 10px 0 10px;
	min-height: 100%;
}
.content {
	padding-top: 10px;
}

Click here for the result

CSS: Center a Div Using Absolute Positioning

02Nov 2011

Aligning divs to the center of the page is relatively easy. It’s just a matter defining its width and setting the left and right margins to “auto”. Easy does it. But what happens when your div is using absolute positioning? It won’t matter if your left and right margins are set to “auto”. I have found a simple solution that works like a charm!

HTML structure:

<div id="main">
    <div id="header"> Header </div>
    <div id="content"> Body </div>
    <div id="footer"> Footer </div>
</div>

CSS: Positioning the “main” div:

#main {
    width: 960px;
    background: #f1f1f1;
    color: #000;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -480px;
}

The left position is set to 50% so that the div will begin at the center of the screen. The left margin value is -half of the size of the div we are centering. This pushes the div over to the left directly to the exact center of the page.

Click here for the final result

Powered by DarkLab Productions

the current theme is Phoenix 1.0
Powered by DarkLab Productions | © 2012 John Hirchak All Rights Reserved.

John Hirchak