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="EditPl us">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Descripti on" 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! 14  4974 
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="EditPl us">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Descripti on" 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
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
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.
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/
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
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
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.
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
programmaticall y?) 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
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/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Dan Rubin |
last post by:
HI everyone, lurking for a long time here, since I can usually solve my own
problems, but here is one I'm stumped by.
I've got a valid XHTML 1.0 Transitional layout, and all the CSS is valid as
well (plenty of warnings, but I'm not worried about that), and I'm making
use of the float property without any problems EXCEPT for one page (coloured
backgrounds added for clarity):
http://autographquartet.com/contact.php
|
by: Ryan |
last post by:
I have a site at
http://www.chancesend.com/news.html
which displays fine in all PC browsers, but does an odd thing in IE for
the Mac.
In the div#main section, I have the main #content div (starting with the
News header), and I have the two sidebar divs #joinlist and #subhead.
Normally, they are supposed to be aligned just below the header.
However, IE Mac is displaying the main #content div below the sidebars.
It's readable, but very...
|
by: Dean Speir |
last post by:
Hoping that someone here can see the glitch I'm experiencing.
I build a site for an organization in which a <TD> which recurs on most
of the pages displays exactly as intended in IE, Netscape and Firefox.
It is seen here: http://www.lipsa.net/, and the external style sheet is
at http://www.lipsa.net/pbr.css.
Note how the dark green TD "sidebar" on the right of the screen flushes
all the way to the right, and up against both the top and...
|
by: Andrew |
last post by:
I'm developing a site using CSS layout. One of the main divs contains
the content, another contains the side bar. I want the content next to
the sidebar so the content is floated left and the sidebar is floated
right. This looks fine is Firefox and IE but doesn't in Opera ( Opera 6
screenshot - http://www.browsercam.com/projects/171753/3119279.jpg ).
I can't find any reference to any bugs in Opera that would cause it to
behave like this,...
|
by: Brian Kendig |
last post by:
I have a page which should have a "sidebar" to the left, and a "main"
block of content to the right. I want to represent each block as a
<div>, and I thought I could do this by having "float: left" on the
sidebar's CSS, and "float: right" on the main block's CSS.
Problem is, when I do it this way, the main block goes *under* the
sidebar, not beside it. I'm guessing this is because the main block
contains text and wants to be as wide as...
| | |
by: Reiki Evolution |
last post by:
Hi,
Hopefully someone can help me here. I am recoding my web site. The original site was just in HTML but I am teaching myself CSS for the new site.
My new site consists of three columns: a sidebar floated left, a sidebar floated right, and the 'main content' which has wide margins to accommodate the floated sidebars.
I am working on the main content. I want to do something very simple: I have an image floated left, with some text to...
|
by: emanoelmelo |
last post by:
Hi
I'm having a problem to convert the Solemnity template to wordpress theme.
This is the link: www.oficinapublicidade.com/assumpcao
As you can see, in FF the sidebar is longer than the content box. That is why the content box (black border) is shorter than should be. It needs to follow the sidebar height, but is not. Maybe because the sidebar is floated right?
In IE the problem is more weird. Visit here:
...
|
by: Bill |
last post by:
If you type our web site directly in a browser, you get our web page.
It has a top bar, a sidebar and a main text page in the middle. If you
click on one of the menu choices across the top, it goes to "Set
Frame" The main text changes, the sidebar changes and the top panel
stays the same.
Problem: If you search on our service, using Google, you get a
specific web page. When you click on that, you get the web page, but
WITHOUT the top...
|
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: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
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...
| |
