473,229 Members | 1,865 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,229 software developers and data experts.

fixed width, 2 column CSS layout problem

Ed
The page I'm working on is at http://www.coldpizzasoftware.com/temp/layout.html

I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?

I know I can add float: left; to the content div and it sort of works,
but it doesn't seem right either. In this case the content div and the
side bar div will no longer stay in their container, the page div,
instead they will overlap the bottom of their container.

I've read several similar threads on this newsgroup and still can't
figure it out. I've googled for a solution too, and I've found several
examples CSS layouts, but none that are similar enough to what I'm
attempting. I know of several sites that use a similar layout and I've
tried stripping them down to the bare bones layout, but each time I've
tried I've screw it up.

Aug 30 '05 #1
10 2167
Ed wrote:
The page I'm working on is at
http://www.coldpizzasoftware.com/temp/layout.html

I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?

Replace:
#sidebar {
background-color: lightyellow;
border: thin solid gray;
position: absolute;
left: auto;
right:0;
width: 210px;
}

With:
#sidebar {
background-color: lightyellow;
border: thin solid gray;
width: 210px;
float: right;
}

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Aug 30 '05 #2
On Tue, 30 Aug 2005 15:24:42 -0700, Ed wrote:
The page I'm working on is at http://www.coldpizzasoftware.com/temp/layout.html

I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?

I know I can add float: left; to the content div and it sort of works,
but it doesn't seem right either. In this case the content div and the
side bar div will no longer stay in their container, the page div,
instead they will overlap the bottom of their container.

I've read several similar threads on this newsgroup and still can't
figure it out. I've googled for a solution too, and I've found several
examples CSS layouts, but none that are similar enough to what I'm
attempting. I know of several sites that use a similar layout and I've
tried stripping them down to the bare bones layout, but each time I've
tried I've screw it up.


Take a look at http://www.positioniseverything.net/ they might be able to
help!
Aug 31 '05 #3
On Tue, 30 Aug 2005 15:24:42 -0700, Ed wrote:
The page I'm working on is at http://www.coldpizzasoftware.com/temp/layout.html

I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?

I know I can add float: left; to the content div and it sort of works,
but it doesn't seem right either. In this case the content div and the
side bar div will no longer stay in their container, the page div,
instead they will overlap the bottom of their container.

I've read several similar threads on this newsgroup and still can't
figure it out. I've googled for a solution too, and I've found several
examples CSS layouts, but none that are similar enough to what I'm
attempting. I know of several sites that use a similar layout and I've
tried stripping them down to the bare bones layout, but each time I've
tried I've screw it up.


It was bugging me so try this, let me know if it is what you were after

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<link rel="stylesheet"
href="testdiv.css"
type="text/css">
<meta name="Generator"
content="TextPad 4.7">
<meta name="Author"
content="">
<meta name="Keywords"
content="?">
<meta name="Description"
content="?">
<meta http-equiv="content-type"
content="text/html; charset=us-ascii">
<style type="text/css">

#page{
background-color:#fff ;
width: 760px;
margin: 20px auto;
}
#header{
background-color:#6cf ;
width:100%;
float: left;
}
#footer{
background-color:#6cf ;
width: 100%;
position: relative;
float: left;
}
#content{
margin: 0 30% 0 0;
border: 1px solid #000;
padding: 0 10px 10px ;
}
#sidebar{
width: 30%;
background-color: #ff9;
float: right;
}
</style>
</head>

<body>
<div id="page">
<div id="header">
<h1>The page title here</h1>
</div>

<div id="sidebar">
<ul>
<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>
</ul>
</div>

<div id="content">
<p>this is the content box that goes on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on</p>
</div>

<div id="footer">
<p>This is the footer and stuff</p>
</div>
</div>
</body>
</html>
Aug 31 '05 #4
Ed
On 2005-08-30 16:20:10 -0700, Jim Moe <jm***************@sohnen-moe.com> said:
#sidebar {
background-color: lightyellow;
border: thin solid gray;
width: 210px;
float: right;
}


That, for some reason, doesn't work unless I put the sidebar div before
the content div in the html and I don't want to do that. The solution
is definitely to use float though, so thanks.

Aug 31 '05 #5
Ed
On 2005-08-31 04:52:56 -0700, Rincewind <th***********@hotmail.com> said:
It was bugging me so try this, let me know if it is what you were after


That's is what I'm after. I was trying to avoid having to put the
sidebar before the content in the HTML, but if I must then I must. It
seems strange to me that this would make any difference at all, but it
makes all the difference. Thank you.

As a side question does anyone know why CSS doesn't allow you to do
something like the following:

#sidebar {
top: #content.top;
left: #content.right;
}

That makes infinitely more scene to me and would simplify most all
layouts IMHO.

Aug 31 '05 #6
Shawn Wilson wrote:
What you're trying to accomplish is called a 'faux' layout


Who besides you calls it 'faux'? I have never heard of such a thing, and
I've been around here for a long time. Regardless, a JavaScript solution
is no solution, at least for many people. In most cases, JS isn't
necessary anyway.

And quit posting attachments, especially binaries. This is a text-only
newsgroup.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Sep 1 '05 #7
Ed wrote:

That, for some reason, doesn't work unless I put the sidebar div before
the content div in the html and I don't want to do that.

Well, yes, of course. "float" is the equivalent of "align" for <img>
and causes an element to act in a similar manner.
What is wrong with correctly ordering the elements to achieve your
target design?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 1 '05 #8
Ed
On 2005-09-01 00:20:21 -0700, Jim Moe <jm***************@sohnen-moe.com> said:
Ed wrote:

That, for some reason, doesn't work unless I put the sidebar div before
the content div in the html and I don't want to do that.

What is wrong with correctly ordering the elements to achieve your
target design?

Well, nothing, that is, if all I'm trying to achieve is a visually
appealing page. It's, however, my understanding that the point of
designing with XHTML and CSS is so that you can layout the HTML
semantically and then apply a style sheet to make it look great.

Since I'm of the opinion that the content of the page is significantly
more important than the navigation, I have the the content to the left
of the navigation and semantically the the content should come before
the navigation. Of course this assumes the use of a western (left to
right) language. Should my site ever need to support a right to left
language, I would apply a separate style sheet, so that the content
would be on the right side and navigation on the left, thus adhering to
the conventions of that language. In the HTML the semantic order would
be preserved, so that the content came before the navigation.

Undoubtedly, the particular website I'm working on working on will
never need to support this, but I'd like to get in the habit of doing
things, in my opinion, correctly.

Thanks to Rincewind's and your reply I have my layout working both
visually and semantically, with only one minor annoyance. If I can't
figure it out soon, I'll most likely chime in with a new questions.
Sep 1 '05 #9
Ed wrote:

That, for some reason, doesn't work unless I put the sidebar div
before the content div in the html and I don't want to do that.

What is wrong with correctly ordering the elements to achieve your
target design?

Well, nothing, that is, if all I'm trying to achieve is a visually
appealing page. It's, however, my understanding that the point of
designing with XHTML and CSS is so that you can layout the HTML
semantically and then apply a style sheet to make it look great.

Okay. Float both content and sidebar; content, float:left; sidebar:
float:right. Then it does not matter which comes first. And you can swap
positions by changing the float direction. Be sure to clear:both in the
footer.
Floating both divs works as long as both are a fixed width, or both are
a percentage width (totaling less than 100%). Otherwise one may wrap below
the other.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 2 '05 #10
"kchayka" <us****@c-net.us> wrote :
Shawn Wilson wrote:
What you're trying to accomplish is called a 'faux' layout


Who besides you calls it 'faux'? I have never heard of such a thing, and
I've been around here for a long time. Regardless, a JavaScript solution
is no solution, at least for many people. In most cases, JS isn't
necessary anyway.


Well, I didn't call it anything until a few weeks ago when I heard that term
and then did a google search for it and found out that the wold calls it
that. Maybe it's a crossover from print layout, I don't know, but it's
definately the term to search for this layout. Everything that's been
pointed out here is in one google search... 'faux columns with css'

A search for '3 column layout with css' gets 223,000 results, while 'faux
columns with css' only gets 10,100 - but the faux search only returns
results for exactly the layout problems and solutions that we're talking
about here. The '3 column layout with css' search finds many things that
match as well, but many that do not.

I just started using that term when I found that a search for it returned
exactly what I was looking for, that's all.

--
Shawn Wilson
Sep 2 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

179
by: SoloCDM | last post by:
How do I keep my entire web page at a fixed width? ********************************************************************* Signed, SoloCDM
3
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width...
25
by: Michael Schuerig | last post by:
I'm trying to do something seemingly very simple, but it's brought me close to crushing my head on the keyboard. All I want is a table where the head row is fixed and the body columns below are...
4
by: Rob Freundlich | last post by:
I have some servlet-generated tabular data that I need to present, so I'm using an HTML Table. In some cases, it can be quite large. I'm flushing the servlet output every N lines to push the data...
3
by: Spondishy | last post by:
OK... After a previous post, I've decided that the site layout will be two columns The layout will be: 1) Page 100% wide 2) Right column will be fixed 150px, left column will use the rest...
12
by: JB | last post by:
Hi All, Is it acceptable to use a fixed width vertical navigation column within a fluid 2 or 3 column layout? Example. Left Column (navigation) fixed width of say 180px Right Column (main...
2
by: Eric Lindsay | last post by:
I hope someone can help, before I start thinking tables have a lot of merit after all. I am trying to achieve a two column layout, with source code div order main content, right side navigation,...
31
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would...
4
by: Jeff | last post by:
Hey I'm wondering how the Fixed-Width Text Format is What I know is that the top line in this text format will contain column names. and each row beneath the top line represent for example a...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.