/    Sign up×
Community /Pin to ProfileBookmark

float my menu

I used the layoutomatic css box generator I looked it up in [URL=http://css.maxdesign.com.au/floatutorial/index.htm]Floatorial[/URL]
yet still I don’t understand why my menu jumps to the bottom
see here[url]www.georgelangenberg.com/wordpress[/url]?

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@porcoDec 06.2004 — It looks like the main content area is too wide and pushing the menu float down below it. You could look at

a) checking that the width of the containers aren't too wide to fit both across

b) check for margins or padding that is passing on to reduce the available space

A good trick at this point is to start giving your divs borders or background colours so you can get a better idea of what is breaking the page.

Hope this is of some assistance.

?
Copy linkTweet thisAlerts:
@george71authorDec 06.2004 — Hi Porco I colored the content DIV and as far as I understand the content DIV leaves enough space for the menu to jump up, yet it won't do that... why? sigh
Copy linkTweet thisAlerts:
@porcoDec 06.2004 — My guess is you'd be looking for a margin property. Padding adds space inside the box but margin adds space outside the box. Try putting

padding: 0;

margin: 0;

just to see what you've got there. Of course comment out the padding and margin properties you already have, don't want to lose them ?

Could be a good start at tracking it down.

Basically I never had much of a look under the hood but I sensed there were 2 main divs working there right? the content one and the right hand floated nav?

Hope this is of some assistance... ?
Copy linkTweet thisAlerts:
@george71authorDec 06.2004 — Actually there are a few DIVs in a container called #rap

#header

#content

#menu (that doesn't float right)

.footer called credit

where should i ad the


padding: 0;

margin: 0;

?


#rap {

width: 740px;

width: 760px;

width: 740px;

border: 1px solid gray;

margin: 10px;

margin-left: auto;

margin-right: auto;

padding: 10px;

}

#header {

font: italic normal 230% 'Times New Roman', Times, serif;

letter-spacing: 0.2em;

padding: 5px;

margin-bottom: 5px;

background-color: rgb(213, 219, 225);

}

#content {

padding: 5px;

margin-right: 250px;

background-color: red;

}

#menu {

float: right;

width: 200px;

width: 210px;

width: 200px;

margin: 0;

margin-left: 5px;

padding: 5px;

background-color: rgb(235, 235, 235);

}

.credit {

clear: both;

padding: 5px;

margin-top: 5px;

background-color: rgb(213, 219, 225);

}
Copy linkTweet thisAlerts:
@porcoDec 06.2004 — First test to do now is to background color the menu and you'll see that its too fat to fit in the space you want it to go I'd expect.

Next test is to put borders around everything, thats what I do so then the page makes sense...

border: 1px solid #ccc;

add it to all of your divs if you have to one at a time. Start from the top left div and try the no margin or padding thing. Its just a test to try and find out what is invisibly pushing across the width of your container.

#NOTE: Probably a good little test to expand the width of your main container, what everything is in, and see it pop up. That'll give you faith at least. Its just being pushed down there cos its too fat or someone's too fat ?
Copy linkTweet thisAlerts:
@george71authorDec 06.2004 — okay Tasmania i'l try that, thanks so far from Amsterdam,
Copy linkTweet thisAlerts:
@george71authorDec 06.2004 — it was the

float: right of the content

combined with the margin right

the menu didn't want to go across that

so now the content has a width and floats left.

thanks george
Copy linkTweet thisAlerts:
@porcoDec 06.2004 — cool, run into it every day too ?
×

Success!

Help @george71 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...