Member Avatar for trihaitran

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.

  • 5 Contributors
  • 5 Replies
  • 119 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by trihaitran
Member Avatar for Fungus1487

two ways.

1) USE TABLES

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

<div style="margin-left:200px;">CONTENT HERE, CONTENT HERE</div>

hope that helps

Member Avatar for MidiMagic

Give each one its own div with a width style.

Member Avatar for Pete_UK

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:

<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.

Member Avatar for DrTsus

Float one left, float one right in a container with a footer with the clear: both; attribute.

Member Avatar for trihaitran

Thanks so much for the help. It was a pretty simple solution after all.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.