CSS + DIV tags

#1
Keith

Posted 11 November 2009 - 06:22 PM

Newbie

Members
9 posts

Hello everyone.

First of all, I'm kinda new on CSS.

I'm trying to build a scheme using only Divs (table-free).
I want it to look like this:

-> Can't post images, so I'll explain, but you can look into the code I put on this post.
-> fullscreen, logotype and 2 columns (left and right). The right column is divided in 2, horizontally: a content part and a footer part.

It's fullscreen, and the Footer (dark orange) must stay there always. If needed, a scrollbar should appear only on the Content div (light orange).
I'm having trouble with overlapping (or whatever the technical name is for this problem).

Here's my code:
HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "--REMOVED DUE TO STAT ON FORUM--">

<html xmlns="--REMOVED DUE TO STAT ON FORUM--">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

</head>


<body>

<div id="page">

    <div id="logo">LOGO HERE</div>

    

    <div id="left-menu">MENU</div>


    <div id="right">

        CONTENT WITH SCROLL IF NEEDED

        <div id="footer">

            LOCKED IN SCREEN FOOTER

        </div>

    </div>


</div>

</body>

</html>

CSS:


@charset "utf-8";


#logo {

    overflow: hidden;

    position: absolute;

    visibility: visible;

    z-index: auto;

    background-color:#CCC;

    float: left;

    height: 57px;

    width: auto;

    left: 0px;

    right: 0px;

    top: 0px;

    bottom: auto;

    margin-top: 0px;

    margin: 0px;

    padding: 0px;

    clear: both;

    float: none;

    border-bottom: solid 1px #808080;

}


#left-menu {

    margin: 0px;

    padding: 0px;

    clear: left;

    float: left;

    height: auto;

    width: 153px;

    overflow:hidden;

    position: absolute;

    visibility: visible;

    z-index: auto;

    left: 0px;

    top: 58px;

    right: auto;

    bottom: 0px;

    border-right:solid 1px #898c8f;

    background-color: #E4E9EE;

    font-family: Tahoma, Geneva, sans-serif;

    font-size: 10pt;

    font-style: normal;

    line-height: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: uppercase;

    color: #2f5065;

    text-decoration: none;

    text-align: center;

}


#right {

    margin: 0px;

    padding: 0px;

    clear: both;

    float: left;

    height: auto;

    width: auto;

    overflow: auto;

    position: absolute;

    visibility: visible;

    z-index: auto;

    left: 154px;

    top: 58px;

    right: 0px;

    bottom: 0px;

    background-color: #FACAFA;

}


#footer {

    margin: 0px;

    padding: 0px;

    clear: both;

    float: left;

    height: 30px;

    width: auto;

    overflow: auto;

    position: absolute;

    visibility: visible;

    z-index: auto;

    bottom: 0;

    left: 16px;

    background-color: #D4FFAA;

}

Thanks in advance to who might help me here. :)

#2
technica

Posted 13 November 2009 - 03:46 AM

Learning Programmer

Members
63 posts

instead of using nested <div> for footer, try using separate independent <div>

Programming Discussion :w00t:

#3
Keith

Posted 13 November 2009 - 08:58 AM

Newbie

Members
9 posts

I did, but the Footer now overlaps the Content.
If the Content needs a scrollbar, the bottom of it gets hidden by the footer.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "---">

<html xmlns="---">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

</head>


<body>


<div id="page">

    <div id="logo">LOGO HERE</div>

    

    <div id="left-menu">MENU</div>


	<div id="right">CONTENT; SCROLL IF NEEDED</div>

    

    <div id="footer">LOCKED IN SCREEN FOOTER</div>

</div>


</body>

</html>

CSS:

@charset "utf-8";


#logo {

	overflow: hidden;

	position: absolute;

	visibility: visible;

	z-index: auto;

	background-color:#CCC;

	float: left;

	height: 57px;

	width: auto;

	left: 0px;

	right: 0px;

	top: 0px;

	bottom: auto;

	margin-top: 0px;

	margin: 0px;

	padding: 0px;

	clear: both;

	float: none;

	border-bottom: solid 1px #808080;

}


#left-menu {

	margin: 0px;

	padding: 0px;

	clear: left;

	float: left;

	height: auto;

	width: 153px;

	overflow:hidden;

	position: absolute;

	visibility: visible;

	z-index: auto;

	left: 0px;

	top: 58px;

	right: auto;

	bottom: 0px;

	border-right:solid 1px #898c8f;

	background-color: #E4E9EE;

	font-family: Tahoma, Geneva, sans-serif;

	font-size: 10pt;

	font-style: normal;

	line-height: normal;

	font-weight: normal;

	font-variant: normal;

	text-transform: uppercase;

	color: #2f5065;

	text-decoration: none;

	text-align: center;

}


#right {

	margin: 0px;

	padding: 0px;

	clear: both;

	float: left;

	height: auto;

	width: auto;

	overflow: auto;

	position: absolute;

	visibility: visible;

	z-index: auto;

	left: 154px;

	top: 58px;

	right: 0px;

	bottom: 0px;

	background-color: #FACAFA;

}


#footer {

	margin: 0px;

	padding: 0px;

	clear: both;

	float: left;

	height: 30px;

	width: auto;

	overflow: auto;

	position: absolute;

	visibility: visible;

	z-index: auto;

	left: 154px;

	right: 0px;

	bottom: 0;

	background-color: #093;

}

Give it 6 or 7 "Lorem impsum" and you'll see what I'm talking about.
Thanks for your suggestion, though.

#4
Keith

Posted 14 November 2009 - 07:23 AM

Newbie

Members
9 posts

It's done.
The only thing I changed was the bottom of the Content div. Now they don't overlap.
Thanks anyway guys.

@Mods: this thread can now be closed.