The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Issues with Columns in a Three-Columned Layout, The sidebar columns seem to hang below my content column.
J_Starner
post Jun 30 2007, 03:56 PM
Post #1


Member
***

Group: Members
Posts: 35
Joined: 18-May 07
Member No.: 2,853



Here I am once again. rolleyes.gif

Anyways, I'm practicing coding a layout out of my CSS book, and I haven't had any problems with doing the layouts up until now. My problem is that my two side columns hover below my content column, and no matter what I do I cannot seem to get them to move up so they are right beside my content column. This is a fixed layout.

I've went and used both the CSS and XHTML validator, and it is all clean. As well as looking over it countless times and finding nothing wrong with the code. Here is my code, as well as a screen shot of what is happening.

I also noticed that the whole thing seemed to have shifted to the left side of the page. I'm pretty sure it is because I haven't defined any padding for the entire layout, but I think I am still missing something here::EDIT::Come to think of it, it might simply be because it is fixed at about 768px, and so looks weird on my screen res, but better on 800x600..Anyways.

CODE

body {
width:760px;
margin:10px;
font-size:80%;
font-family:"Lucida Grande",Verdana,sans-serif;
background-color:#000;
}

#masthead {
width:738px;
margin:0 0 10px 0;
padding:10px;
border:1px solid #000;
background-color:#CCC;
}

#content {
width:338px;
margin-left:200px;
margin-right:200px;
margin-bottom:10px;
padding:10px;
border:1px solid #CCC;
}

#sidebar_a {
float:left;
width:158px;
margin-bottom:10px;
padding:10px;
border:1px solid #CCC;
color:#F00;
}

#sidebar_b {
float:right;
width:158px;
margin-bottom:10px;
padding:10px;
border:1px solid #CCC;
color:#F00;
}

#footer {
clear:both;
width:738px;
padding:10px;
border:1px solid #000;
background-color:#CCC;
}

h1 {
font-size:150%;
color:#fff;
}

h2 {
font-size:140%;
color:#fff;
}

h3 {
font-size:120%;
color:#fff;
}







p {
font-size:100%;
line-height:150%;
color:#F00;
}


CODE

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Chapter 11:Classic Layouts</title>
    <link rel='stylesheet' media='screen' type='text/css' href='columns.css' />
  </head>
<body>
<div id="masthead">
<h2>Masthead</h2>
</div>
<div id="content">
<h2>Content</h2>
<p>Hello.I am James Starner. I created and run Overtone Sound by myself. I specialize in

multimedia.</p>
</div>
<div id="sidebar_a">
<h2>Sidebar A</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="sidebar_b">
<h2>Sidebar B</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h2>B</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="footer">
<h2>Footer</h2>
</div>


</body>
</html>


And the screen shot::

IPB Image

This post has been edited by J_Starner: Jun 30 2007, 03:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 30 2007, 05:18 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,317
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



There are two basic ways to get sidebars like you want.

(1) You can put the sidebar markup before the content, float the sidebar(s) left/right, and then let the content appear next to the floated sidebar(s). Your example should work like this if you move the content markup after the sidebar markup.

(2) You can put the sidebar markup after the content, leave margins to the side of the content, and position the sidebar(s) in the left/right margin(s). Jukka Korpela has a simple example of this approach on his site.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
J_Starner
post Jun 30 2007, 05:43 PM
Post #3


Member
***

Group: Members
Posts: 35
Joined: 18-May 07
Member No.: 2,853



I tried the first one you mentioned. I put my #content code after my sidebar_a and sidebar_b code, but nothing happened. This was actually something the book used earlier in the cheapter for another example, but it doesn't seem to be working on this one.

I don't get why it jumped down like that, wouldn't it only make sense that those two sidebars would be right next to the content column? What precisely makes them jump down below my content column like that? It was set to go and looking fine until I adjusted the code to create what the book calls the "Fixed and Floated Three-Column Layout". Though I seem to misunderstand how this particular layout is in any way liquid because it uses all pixels as its form of measurement.

I'm going to read the info on your second one though, but I have to catch some sleep before work so I will have to try after I get home.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 30 2007, 06:55 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,317
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Without the URL of a sample document, I'm just guessing, but it sounds like you were rearranging the CSS in the style sheet, rather than rearranging the markup in the content. To get the design to work with your style sheet, you'd need to move the <div id="content"> after the <div id="sidebar_a"> and <div id="sidebar_b">.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
J_Starner
post Jun 30 2007, 08:10 PM
Post #5


Member
***

Group: Members
Posts: 35
Joined: 18-May 07
Member No.: 2,853



Oh I see! OK, that worked. Is there a reason why that needs to be done? Seems sort of like some "bug" to me. I'm just curious.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 30 2007, 11:04 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,317
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



When you float something, it floats left or right, relative to where would have been normally, without the float. It doesn't float up or down.

Would you want a floating image/table/whatever at the end of a three-page article to also float up to the top of the article? It wouldn't make any sense there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
J_Starner
post Jul 1 2007, 02:53 AM
Post #7


Member
***

Group: Members
Posts: 35
Joined: 18-May 07
Member No.: 2,853



I'm sorry, but I don't really follow what you mean. I do indeed understand about floating left or right. Is that what was happening with my page (I am sure it is what you are talking about, but just being sure)?

So by me floating the sidebars left and right, it had some weird effect of pushing the content up? I'm sorry, I just don't follow.

I'll do a bit more reading up on floats to gain a better understanding, as it seems my understand is still very little.

Thank you for your help, trust me when I say that I do appreciate it very much.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 1 2007, 10:25 AM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,317
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



You had something like
CODE
<!-- content -->
<!-- sidebar floating left -->
<!-- sidebar floating right -->

By definition, the sidebars will float to the left and right after the content appears. If you want them to appear before that, then you need something like
CODE
<!-- sidebar floating left -->
<!-- sidebar floating right -->
<!-- content -->

That floats the sidebars to the left and right at the very beginning of the document, so the content can appear between them.

Does that make sense?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
J_Starner
post Jul 1 2007, 02:23 PM
Post #9


Member
***

Group: Members
Posts: 35
Joined: 18-May 07
Member No.: 2,853



Ahh Okay, yes it does make sense to me now! Thanks a lot
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 9th December 2019 - 12:56 AM