What's wrong with my CSS?

HTML & CSS
1

Hi there
this is my JSfiddle.net
http://jsfiddle.net/obfxvxbw/7/

I have divided my web page in 3 parts
1)topHeader
2)MainContent
3)Footer

and further divided topHeader in two class one is “dropdownmenu” and other is “loginblock” but when I try to shift my loginblock class in the right then my maincontent block content is messing with my topHeader what is wrong with CSS?

Thanks

2

Perhaps it’s just because I woke up, but what exactly does “wrong” mean :slight_smile: ?

3

loginblock is inside the main-content class I suppose It should be in .topHeader class

4

Please read this article and it should all become clear :slight_smile: . You need to contain those floated elements.

http://www.codefundamentals.com/blog/clearing-and-containing-floats

1 Like
5

thanks
@RyanReese

6

You have two divs - one floated left and other floated to the right.
Basically, when you float an element in CSS style, you are pulling that element away from the normal flow layout and thereby making any content below the floating div to move upward. To fix this, you need a block element with CSS style to make any content below it to follow the normal flow layout.
I generally use a div element with property clear:both.

In your case, add a new div element after closing loginblock div.

<div class='clearfix'></div>

And in CSS, add

.clearfix
{ 
    clear:both;
}
7

That’s an old / obsolete way of doing things, Steve. I recommend you read my article for more up-to-date methods which require no additional HTML markup.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.