944,124 Members | Top Members by Rank

Ad:
Jun 19th, 2007
0

Css floating problem

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
trihaitran is offline Offline
28 posts
since Dec 2006
Jun 20th, 2007
0

Re: Css floating problem

two ways.

1) USE TABLES

2) add a margin to your content i.e.
HTML and CSS Syntax (Toggle Plain Text)
  1. <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
Reputation Points: 66
Solved Threads: 56
Posting Pro in Training
Fungus1487 is offline Offline
459 posts
since Apr 2007
Jun 20th, 2007
0

Re: Css floating problem

Give each one its own div with a width style.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Jun 21st, 2007
0

Re: Css floating problem

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 and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <style type="text/css">
  3. <!--
  4.  
  5. #container {
  6. width: 512px;
  7. border: 1px Solid #000;
  8. }
  9.  
  10. #menu {
  11. float: left;
  12. width: 100px;
  13. background-color: #CCC;
  14. margin: 0px 10px 0px 0px;
  15. }
  16.  
  17. #content {
  18. float: right;
  19. width: 400px;
  20. background-color: #EEE;
  21. }
  22.  
  23. -->
  24. </style>
  25.  
  26. <body>
  27. <div id="container">
  28. <div id="menu">
  29. some text here
  30. </div>
  31.  
  32. <div id="content">
  33. blah blah blah
  34. </div>
  35. </div>
  36. </body>
  37. </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.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
Pete_UK is offline Offline
3 posts
since Jun 2007
Jun 21st, 2007
0

Re: Css floating problem

Float one left, float one right in a container with a footer with the clear: both; attribute.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
DrTsus is offline Offline
10 posts
since Jun 2007
Jun 22nd, 2007
0

Re: Css floating problem

Thanks so much for the help. It was a pretty simple solution after all.
Reputation Points: 10
Solved Threads: 0
Light Poster
trihaitran is offline Offline
28 posts
since Dec 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: CSS Footor - Please Stay at the Bottom!!!
Next Thread in HTML and CSS Forum Timeline: Need a contact form





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC