HTML and CSS

Css floating problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Dec 2006

Posts: 28

Reputation: trihaitran is an unknown quantity at this point

Solved Threads: 0

trihaitran trihaitran is offline

Offline

Light Poster

Css floating problem

Jun 19th, 2007

Hi, I new to CSS and I can't seem to find the solution to my problem anywhere online. The page in question is here

Right now the page looks like this:

here

This is what I want it to look like:
here

I don't want any text to wrap around the menu, but stay aligned on the right side of the page. I tried to extend the menu vertically, but that pushes the footer really far down, and as every page has a different length, hardcoding the height of the menu is a bad idea. I know that css must have some kind of function to get the behaviour that I want, but I just don't know what it is. Maybe there is something wrong with the way that the floating was done.

My css file is at here

Thanks so much.

Last edited by trihaitran; Jun 19th, 2007 at 6:25 pm.

•

Join Date: Apr 2007

Posts: 437

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: Css floating problem

Jun 20th, 2007

two ways.

1) USE TABLES

2) add a margin to your content i.e.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div style="margin-left:200px;">CONTENT HERE, CONTENT HERE</div>
<div style="margin-left:200px;">CONTENT HERE, CONTENT HERE</div>

hope that helps

Last edited by Fungus1487; Jun 20th, 2007 at 7:11 pm. Reason: mistake :D

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Css floating problem

Jun 20th, 2007

Give each one its own div with a width style.

Daylight-saving time uses more gasoline

•

Join Date: Jun 2007

Posts: 3

Reputation: Pete_UK is an unknown quantity at this point

Solved Threads: 1

Pete_UK

Offline

Newbie Poster

Re: Css floating problem

Jun 21st, 2007

Hi there,

A simple way to do this, since you have only 2 columns is to use the float command.

For your menu element you can write:

#menu {
float: left;
width: 100px;
margin: 0px 10px 0px 0px;
}

you don't need to declare a height, it will auto extend depending on your content, useful if you want to add more in stuff in below it.

for the content/ 2nd column you can write:

#content {
float: right;
width: 400px;
}

This should mean that your menu will appear on the far left of your screen and the content appears on the far right of your screen.

To make this display properly you make a container layer which has the 2 elements inside it. this means that the menu item will go to the far left of the inside of the container and the content column will go to the far right inside of the container.

#container {
width: 510px;
}

Hope that helps you out, I've posted this as an example below:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<style type="text/css">
<!--
 
#container {
width: 512px;
border: 1px Solid #000;
}
 
#menu {
float: left;
width: 100px;
background-color: #CCC;
margin: 0px 10px 0px 0px;
}
 
#content {
float: right;
width: 400px;
background-color: #EEE;
}
 
-->
</style>
 
<body>
<div id="container">
<div id="menu">
some text here
</div>
 
<div id="content">
blah blah blah
</div>
</div>
</body>
</html>
<html>
<style type="text/css">
<!--

#container {
width: 512px;
border: 1px Solid #000;
}

#menu {
float: left;
width: 100px;
background-color: #CCC;
margin: 0px 10px 0px 0px;
}

#content {
float: right;
width: 400px;
background-color: #EEE;
}

-->
</style>

<body>
<div id="container">
<div id="menu">
some text here
</div>

<div id="content">
blah blah blah
</div>
</div>
</body>
</html>

if in doubt a good reference point for CSS (and most web things) is at: http://www.w3schools.com/css/default.asp

give us a shout if you don't understand.

Cheers,

pete.