CODEWITHSUNDEEP
htmlcsscss-float
cmorris1441
cmorris1441

Reputation: 167

How to Position with Float?

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

Answers (3)

Ricardo Castañeda
Ricardo Castañeda

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

jeff
jeff

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

jsweazy
jsweazy

Reputation: 1621

In CSS when using float, the item you add float to should also have a width.

http://jsbin.com/azetuk/

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

http://jsbin.com/itaqok/

Upvotes: 2

Related Questions