float sidebar

Mark

please view http://mnbayazit.com/misc/sample.gif

i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.

code below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLENew Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE>
* {
margin: 0;
padding: 0;
list-style: none;
}

body {
background: black;
}
#wrap {
width: 700px;
background: white;
margin: auto;
}
#head {
background: red;
}
#foot {
clear: both;
background: blue;
}
#main {
float: left;
}
#side {
background: green;
float: right;
width: 200px;
}
</STYLE>
</HEAD>

<BODY>
<div id="wrap">
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut
purus non mauris luctus porttitor. Proin purus. Proin lobortis ligula
vel velit sollicitudin nonummy. Morbi vestibulum, lorem adipiscing
cursus mollis, ante mi sagittis nisl, vitae luctus est arcu at pede.
Vivamus egestas ullamcorper nunc. Nunc condimentum consequat dui.
Aliquam erat volutpat. Aliquam erat volutpat. Donec non turpis. Sed
facilisis. Nullam elementum, nisl sit amet aliquam malesuada, purus
sapien vulputate nibh, sit amet consectetuer ligula neque porttitor
enim.

Vivamus blandit mauris at sapien. Pellentesque tristique mauris a
arcu. In velit pede, consectetuer quis, mollis vel, pellentesque sit
amet, enim. Nunc in est. Vivamus imperdiet, nulla id fermentum blandit,
mauris orci dapibus odio, ut blandit tortor nisl nec eros. Aliquam
malesuada neque eu turpis. Morbi non arcu. Cras faucibus venenatis
nibh. Sed dolor nibh, tempor sit amet, aliquam vel, molestie ut, lacus.
Phasellus luctus. In lorem erat, faucibus porttitor, suscipit eu,
gravida sed, nunc. Aliquam faucibus feugiat nisl.

Phasellus nunc. Sed bibendum ligula quis dolor. Duis imperdiet, metus
vel facilisis vulputate, ipsum nulla dapibus mi, sed euismod velit
tellus eget nisi. Phasellus in augue. Nullam ullamcorper diam at urna.
Suspendisse aliquet, erat eget porttitor commodo, enim dolor
consectetuer elit, a tincidunt nisi lacus a libero. Morbi posuere odio
tempor risus. Cras non lacus. Nulla vitae urna. Nullam urna. Fusce
neque justo, luctus sed, ullamcorper facilisis, ultricies quis, ligula.
Cras ut turpis at ante mollis consequat. Pellentesque interdum purus.
Duis erat. Quisque laoreet sodales orci. Aliquam eu augue.

Nunc vitae odio. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus mi velit, lacinia
vel, cursus nec, congue vel, urna. Pellentesque eget metus et arcu
aliquet ornare. Integer ac libero. Morbi tempor varius neque. Proin
quis dui. Nullam tempus egestas turpis. Donec vel ligula. Pellentesque
pharetra enim in odio. Maecenas ornare metus quis tortor. Integer
eleifend, pede faucibus condimentum cursus, elit pede fringilla lorem,
vitae tincidunt arcu lacus id purus. Etiam imperdiet tellus nec lacus.
Quisque laoreet nunc ut velit rutrum mattis.

Proin augue pede, tempor at, scelerisque eu, laoreet ullamcorper,
quam. Duis justo quam, nonummy ut, sollicitudin eu, dictum non, diam.
Nullam nec lorem eget lacus eleifend volutpat. Phasellus mollis ipsum
sed ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque ullamcorper aliquam leo. Vestibulum et arcu. Sed pellentesque
pretium ipsum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Etiam turpis ante, ultricies non,
porta ut, ultricies nec, dolor. Integer justo justo, condimentum ut,
laoreet sed, consectetuer ut, velit.</p>
</div>
<div id="side">
<h3>Title</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div id="foot">
Copyright © Mark Bayazit 2006
</div>
</div>
</BODY>
</HTML>

thanks!

Aug 24 '06 #1

Subscribe Post Reply

4949

Mark

Mark wrote:

please view http://mnbayazit.com/misc/sample.gif

i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.

code below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLENew Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE>
* {
margin: 0;
padding: 0;
list-style: none;
}

body {
background: black;
}
#wrap {
width: 700px;
background: white;
margin: auto;
}
#head {
background: red;
}
#foot {
clear: both;
background: blue;
}
#main {
float: left;
}
#side {
background: green;
float: right;
width: 200px;
}
</STYLE>
</HEAD>

<BODY>
<div id="wrap">
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut
purus non mauris luctus porttitor. Proin purus. Proin lobortis ligula
vel velit sollicitudin nonummy. Morbi vestibulum, lorem adipiscing
cursus mollis, ante mi sagittis nisl, vitae luctus est arcu at pede.
Vivamus egestas ullamcorper nunc. Nunc condimentum consequat dui.
Aliquam erat volutpat. Aliquam erat volutpat. Donec non turpis. Sed
facilisis. Nullam elementum, nisl sit amet aliquam malesuada, purus
sapien vulputate nibh, sit amet consectetuer ligula neque porttitor
enim.

Vivamus blandit mauris at sapien. Pellentesque tristique mauris a
arcu. In velit pede, consectetuer quis, mollis vel, pellentesque sit
amet, enim. Nunc in est. Vivamus imperdiet, nulla id fermentum blandit,
mauris orci dapibus odio, ut blandit tortor nisl nec eros. Aliquam
malesuada neque eu turpis. Morbi non arcu. Cras faucibus venenatis
nibh. Sed dolor nibh, tempor sit amet, aliquam vel, molestie ut, lacus.
Phasellus luctus. In lorem erat, faucibus porttitor, suscipit eu,
gravida sed, nunc. Aliquam faucibus feugiat nisl.

Phasellus nunc. Sed bibendum ligula quis dolor. Duis imperdiet, metus
vel facilisis vulputate, ipsum nulla dapibus mi, sed euismod velit
tellus eget nisi. Phasellus in augue. Nullam ullamcorper diam at urna.
Suspendisse aliquet, erat eget porttitor commodo, enim dolor
consectetuer elit, a tincidunt nisi lacus a libero. Morbi posuere odio
tempor risus. Cras non lacus. Nulla vitae urna. Nullam urna. Fusce
neque justo, luctus sed, ullamcorper facilisis, ultricies quis, ligula.
Cras ut turpis at ante mollis consequat. Pellentesque interdum purus.
Duis erat. Quisque laoreet sodales orci. Aliquam eu augue.

Nunc vitae odio. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus mi velit, lacinia
vel, cursus nec, congue vel, urna. Pellentesque eget metus et arcu
aliquet ornare. Integer ac libero. Morbi tempor varius neque. Proin
quis dui. Nullam tempus egestas turpis. Donec vel ligula. Pellentesque
pharetra enim in odio. Maecenas ornare metus quis tortor. Integer
eleifend, pede faucibus condimentum cursus, elit pede fringilla lorem,
vitae tincidunt arcu lacus id purus. Etiam imperdiet tellus nec lacus.
Quisque laoreet nunc ut velit rutrum mattis.

Proin augue pede, tempor at, scelerisque eu, laoreet ullamcorper,
quam. Duis justo quam, nonummy ut, sollicitudin eu, dictum non, diam.
Nullam nec lorem eget lacus eleifend volutpat. Phasellus mollis ipsum
sed ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque ullamcorper aliquam leo. Vestibulum et arcu. Sed pellentesque
pretium ipsum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Etiam turpis ante, ultricies non,
porta ut, ultricies nec, dolor. Integer justo justo, condimentum ut,
laoreet sed, consectetuer ut, velit.</p>
</div>
<div id="side">
<h3>Title</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div id="foot">
Copyright © Mark Bayazit 2006
</div>
</div>
</BODY>
</HTML>

thanks!

i guess i could have just uploaded the page instead of a picture of it

http://www.mnbayazit.com/misc/sample.html

Aug 24 '06 #2

boclair

Mark wrote:

Mark wrote:
>please view http://mnbayazit.com/misc/sample.gif

i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.

Place the markup for the side div immediately beneath the head div?

Louise

Aug 24 '06 #3

Mark

boclair wrote:

Mark wrote:
Mark wrote:
please view http://mnbayazit.com/misc/sample.gif

i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.

Place the markup for the side div immediately beneath the head div?

Louise

doesnt help. tried it already. just moves the sidebar above the main
content, and the content is moved down so that it can still fill the
entire width.

Aug 24 '06 #4

Els

Mark wrote:

please view http://mnbayazit.com/misc/sample.gif

i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.

[snip code]

Let div#side and div#main swap places. Put the float before the main
content.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Aug 24 '06 #5

boclair

Mark wrote:

boclair wrote:
>Mark wrote:
>>Mark wrote:
please view http://mnbayazit.com/misc/sample.gif

i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.
Place the markup for the side div immediately beneath the head div?

Louise

doesnt help. tried it already. just moves the sidebar above the main
content, and the content is moved down so that it can still fill the
entire width.

Just noticed that you have the content floated left via the main div.
Why? One float will not wrap another float and is the reason you are
seeing the content displayed this way.

Try
1.. comment out main div
2.. place markup for side div immediately below head div

Louise

Aug 24 '06 #6

boclair

boclair wrote:

Mark wrote:
>boclair wrote:
>>Mark wrote:
Mark wrote:
please view http://mnbayazit.com/misc/sample.gif
>
i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.
Place the markup for the side div immediately beneath the head div?

Louise

doesnt help. tried it already. just moves the sidebar above the main
content, and the content is moved down so that it can still fill the
entire width.

Just noticed that you have the content floated left via the main div.
Why? One float will not wrap another float and is the reason you are
seeing the content displayed this way.

Try
1.. comment out main div
2.. place markup for side div immediately below head div

Alternately, if the main div is necessary, place the side div markup
with the main div before any content as below

Louise

<div id="main">
<div id="side">
<h3>Title</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<h2>Content</h2>
etc

Aug 24 '06 #7

Mark

boclair wrote:

Mark wrote:
boclair wrote:
Mark wrote:
Mark wrote:
please view http://mnbayazit.com/misc/sample.gif

i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.
Place the markup for the side div immediately beneath the head div?

Louise
doesnt help. tried it already. just moves the sidebar above the main
content, and the content is moved down so that it can still fill the
entire width.

Just noticed that you have the content floated left via the main div.
Why? One float will not wrap another float and is the reason you are
seeing the content displayed this way.

Try
1.. comment out main div
2.. place markup for side div immediately below head div

Louise

well, this worked..but now the main content wraps around the sidebar,
whereas i want it to make a nice neat column, stopping where the
sidebar does.

if i could extend the sidebar down the page, it would fix the problem,
but height: 100%; doesnt do the trick.

Aug 24 '06 #8

boclair

Mark wrote:

boclair wrote:
>Mark wrote:
>>boclair wrote:
Mark wrote:
Mark wrote:
>please view http://mnbayazit.com/misc/sample.gif
>>
>i'm wondering how i can make the sidebar (green) float to the right of
>the main text, without specifying the width of the main content
>(because the sidebar is optional, i need the main content to fill the
>space available). ie, the green sidebar should be right up against the
>red header.
Place the markup for the side div immediately beneath the head div?

Louise
doesnt help. tried it already. just moves the sidebar above the main
content, and the content is moved down so that it can still fill the
entire width.

Just noticed that you have the content floated left via the main div.
Why? One float will not wrap another float and is the reason you are
seeing the content displayed this way.

Try
1.. comment out main div
2.. place markup for side div immediately below head div

Louise

well, this worked..but now the main content wraps around the sidebar,
whereas i want it to make a nice neat column, stopping where the
sidebar does.

if i could extend the sidebar down the page, it would fix the problem,
but height: 100%; doesnt do the trick.

Applying a 100% height rule to a floated element, irrespective of
content, begs the question, "100% of what?" There are certain hacks
that can be applied more or less reliably. Google on "height of float"

It is not allowable to float the main content div without declaring a
width, be it an absolute, or preferably, relative value.

Apart from this there are many ways to skin this cat. Time to do a
Google search on "two column layout"; plenty of examples that can be
adapted.

Commonly they involve applying a width equal to the width of the sidebar
to the width of right margin on the main div (floating the sidebar) or a
right border on the main div (absolutely positioning the sidebar).

If, however, the sidebar object (is the sidebar menu generated
programmatically?) may or may not have content, some sort of conditional
scripting will be involved. If the content is of zero length or is
null, the scripting not only not display the sidebar or apply zero
width, the margin width or border width rule on main div needs to be
reduced to zero. Easily do-able. If the sidebar contains links, it would
be unwise to do this client side. Off topic here.

A different layout might be more appropriate; a horizontal menubar
simplifies the problem and would leave the painting of the main content
independent of the inclusion of the menu. There also advantages if css
in not enabled.

Louise

Aug 25 '06 #9

Els

Mark wrote:

well, this worked..but now the main content wraps around the sidebar,
whereas i want it to make a nice neat column, stopping where the
sidebar does.

Give the content a margin-right that's wide enough for the width of
the sidebar, and it won't wrap around the sidebar anymore.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Aug 25 '06 #10

Mark

Els wrote:

Mark wrote:

well, this worked..but now the main content wraps around the sidebar,
whereas i want it to make a nice neat column, stopping where the
sidebar does.

Give the content a margin-right that's wide enough for the width of
the sidebar, and it won't wrap around the sidebar anymore.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

well..this defeats the purpose.
the whole idea was that when the sidebar is present the main content
will be smaller, but when the sidebar is absent, the main content will
take up the full width.

Sep 20 '06 #11

Els

Mark wrote:

Els wrote:
>Mark wrote:

>>well, this worked..but now the main content wraps around the sidebar,
whereas i want it to make a nice neat column, stopping where the
sidebar does.

Give the content a margin-right that's wide enough for the width of
the sidebar, and it won't wrap around the sidebar anymore.

well..this defeats the purpose.
the whole idea was that when the sidebar is present the main content
will be smaller, but when the sidebar is absent, the main content will
take up the full width.

You have a point :-)
(somehow overlooked your 'sidebar is optional')

In IE, it's easy: just give content "zoom:1;" and it will become a
block that sits next to the floated sidebar.

That doesn't work in Firefox though. Luckily, Firefox and Opera
understand "display:table-cell". Not tested in other browsers, but in
my local test case, #content{zoom:1;display:table-cell;} does what you
want in both IE5, IE7, Opera 8.54 and Firefox 1.5.06.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Sep 20 '06 #12

Mark

Els wrote:

Mark wrote:

Els wrote:
Mark wrote:

well, this worked..but now the main content wraps around the sidebar,
whereas i want it to make a nice neat column, stopping where the
sidebar does.

Give the content a margin-right that's wide enough for the width of
the sidebar, and it won't wrap around the sidebar anymore.
well..this defeats the purpose.
the whole idea was that when the sidebar is present the main content
will be smaller, but when the sidebar is absent, the main content will
take up the full width.

You have a point :-)
(somehow overlooked your 'sidebar is optional')

In IE, it's easy: just give content "zoom:1;" and it will become a
block that sits next to the floated sidebar.

That doesn't work in Firefox though. Luckily, Firefox and Opera
understand "display:table-cell". Not tested in other browsers, but in
my local test case, #content{zoom:1;display:table-cell;} does what you
want in both IE5, IE7, Opera 8.54 and Firefox 1.5.06.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

hmm...interesting. i'll have to try this out.
thank you.

did you know i found this exact same thread on both

http://www.highdots.com/forums/casca...ar-186821.html
and
http://www.thescripts.com/forum/thre...7132-2-10.html

as well?? are they stealing content from google groups, or what's going
on?

Sep 25 '06 #13

Els

Mark wrote:

did you know i found this exact same thread on both

http://www.highdots.com/forums/casca...ar-186821.html
and
http://www.thescripts.com/forum/thre...7132-2-10.html

as well??

Those are only two of many.

are they stealing content from google groups, or what's going on?

No, they are not stealing content from Google Groups.
These sites, *and* Google Groups, are "stealing" content from Usenet.
You happen to use Google Groups, thinking it is the real thing. You
could have been using highdots or thescripts, thinking it is the
original. All of them are just displaying Usenet messages, while some
of these sites acknowledge it, and some don't. The ones that don't
acknowledge it I call thiefs, the ones that do, I call portals :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Sep 25 '06 #14

Mark

Els wrote:

Mark wrote:

did you know i found this exact same thread on both

http://www.highdots.com/forums/casca...ar-186821.html
and
http://www.thescripts.com/forum/thre...7132-2-10.html

as well??

Those are only two of many.

are they stealing content from google groups, or what's going on?

No, they are not stealing content from Google Groups.
These sites, *and* Google Groups, are "stealing" content from Usenet.
You happen to use Google Groups, thinking it is the real thing. You
could have been using highdots or thescripts, thinking it is the
original. All of them are just displaying Usenet messages, while some
of these sites acknowledge it, and some don't. The ones that don't
acknowledge it I call thiefs, the ones that do, I call portals :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

ahh.. so that's what this "usenet" thing is :p
i'll have to look into this, maybe i can use it on my site too... with
acknowledgement of course.

Sep 26 '06 #15

Similar topics