Reputation: 167
How can I make the content text on this page, http://morriswebsitedesign.com/about.html, line up with the navigation links? I used to use the absolute property or tables, but now I'm trying to figure out how to use float.
I want it to look like this: A BBB
where A is nav and B is content.
Upvotes: 0
Views: 425
Reputation: 5802
First remove the float:left from the #content, that will make your #content to be at the right side of the menu.
Second if you don't want part of the text to be under the menu, give it an overflow:hidden.
#menu{float:left}
#content{overflow:hidden}
This way you won't need to give any width to your content.
In order to make some space between them you can give a margin-right and margin-bottom to your menu.
#menu{margin-right:20px; margin-bottom:20px}
I see that in your css your 'p' have margin-top. And that makes the top of your content not to be aligned to your menu. You can use css3 to remove the margin of the first element.
#content p:nth-child(1){margin-top:0}
EDIT: To align the #content with the logo:
#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}
First you need your logo and your menu act as a column, to get that both must have the same width, and be floated to the left. The clear left will make your menu to move under the logo.
Then select your #content remove any float:left and give it a display:inline, that way it won't act as a block anymore.
The margin-bottom of the menu is to make that your text won't move under your menu, but you can try giving your menu a bigger height.
Upvotes: 2
Reputation: 8348
Your text and navigation links are too wide to fit in their containing div
. If you want them to line up, you'll have to increase the size of the containing div
, or decrease the size of the text and/or navigation links.
When I use the following style, for example, they line up perfectly on my computer:
#content { width:700px; }
You'll have to wrap the miniature logo and the navigation links in a div
with the style float:left;
. You can then remove the float:left
from the miniature logo and the ul
.
Upvotes: 2
Reputation: 1621
In CSS when using float, the item you add float to should also have a width.
But when floating you need to know about clearing those floats. Here is a good read:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
If you want logo beside content too, wrap menu and logo in div then float that element
Upvotes: 2