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. 10  2203 
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)
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!
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.c ss"
type="text/css">
<meta name="Generator "
content="TextPa d 4.7">
<meta name="Author"
content="">
<meta name="Keywords"
content="?">
<meta name="Descripti on"
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>
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.
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.
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.
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)
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.
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) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: SoloCDM |
last post by:
How do I keep my entire web page at a fixed width?
*********************************************************************
Signed,
SoloCDM
|
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 (151px) as it
contains an image, while everything else is fluid. However this only works
in IE 6.0. In Netscape and Opera I found that the auto width of the right
column is 100% so it jumps down below the menu if the left column is fixed -
not...
|
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 scrollable (with
the ordinary scrollbars, no less). Whatever I try, the columns in the
head and the body aren't aligned; the widths are computed independently
which gives a completely ragged look.
Michael
--
|
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 to the browser as it
generates, and I've used "table-layout: fixed" for the table's CSS class.
It works pretty well in Netscape (7.1 and higher) - the table is drawn
pretty much as the rows are received by the browser. However, Internet...
|
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 of
the space
| | |
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 content) fluid width to fit rest of window
|
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, footer. Naturally I want liquid
main contents, and I have float: right; img, and clear: both; paragraphs
in the main contents div.
Fixed width right navigation column is probably essential. There is a
confounded logo graphic to go at the top...
|
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 like the middle column
just to use up that space instead.
Any way this is possible?
Thanks for your help, it is highly appreciated!
|
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 row in a
table etc...
But does fixed-with mean that every column has a fixed with: for example
first column is 10 char wide and second column is 30 char wide?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| | |
