Welcome to WebmasterWorld Guest from 34.207.152.62

Forum Moderators: not2easy

Message Too Old, No Replies

Novice CSS question

     
2:06 am on Jun 9, 2008 (gmt 0)

New User

10+ Year Member

joined:June 9, 2008
posts: 1
votes: 0


I am trying to learn to use CSS for layout and I am really having a hard time getting the right content div to go where I think I am telling it to. I know I am not doing anything complicated so I must be making a simple mistake, but I do not see what I am doing wrong. I am pasting in a portion of the css and markup that I am using. The problem is everything is fine until the right content which for some reason stays on the right like it is supposed to but is below the center content. Nothing I do will make it work but there is room for it. Thanks to anyone that can figure out what I am doing wrong.

body
{
color: black;
font-family: Verdana, Arial;
background-color: #f0f0f0;
}

#status
{
background-color: #a0c0e0;
width: 100%;
position: static;
color: Black;
}

#leftContent
{
left: 10px;
width: 150px;
position: absolute;
background-color: #80a0c0;
height: 100%;
color: black;
}

#centerContent
{
margin-left: 155px;
margin-right: 155px;
position: static;
height: 100%;
}

#rightContent
{
position: absolute;
right: 10px;
width: 150px;
background-color: #80a0c0;
height: 100%;
}

#myHeader
{
font-size: xx-large;
vertical-align: middle;
text-align: center;
}

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="JRLibrary.master.cs" Inherits="JRLibrary" %>
<!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 runat="server">
<title></title>
</head>
<body>
<h1 id="myHeader">
</h1>
<form id="form1" runat="server">
<div id="status">
</div>
<div id="leftContent">
</div>
<div id="centerContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="rightContent">
</div>
</form>
</body>
</html>

7:50 am on June 9, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


It's because you're not assigning a
top
value to the
rightContent
. This means it will fetch the default value for top, which is to say: find the start position of this element were it not positioned absolutely, and use that.

Which means the element starts at that point, which happens to be below

centerContent
.

You can explicitly set a

top
value to line up with the
centerContent div
.

Alternatively (more difficult since it's back to square one) you could try researching other methods for columnar layout, seeing as absolutely positioning columns can end up being more pain-in-practice than effectiveness-in-control (what happens if the length of your absolutely positioned column is longer than that of the middle column that's within the regular document flow?)

Anyway, give it a go and if you feel it's best then good. Research different methods and see if you still like it best after all that too.

P.S. welcome to Webmaster World ABKThor :) Remember to have a read through the two sticky posts at the top of this forum, they're a good guide to posting.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members