CODEWITHSUNDEEP
htmlcss
skywalker2909
skywalker2909

Reputation: 1686

CSS float and clear not giving the right results

enter image description here If you look at the screenshot, i need the 'title', 'subtitle' and 'social media icons' on the same line , so i float the 'title' to left and float the 'social media icons' to right because i want them to be on the extreme right end, but when i give it a float of right, it spoils the alignment of the navigation menu ( circled red ) which is supposed to be below and takes it to the top. Any solutions for this? The following is my html5 code

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8" />
    <link href = "css/style.css" rel = "stylesheet" />
    <title>Test</title>
</head>
<body>
    <div id = "container">
        <header>
            <div id = "title">Test title</div>
            <div id = "subtitle">test subtitle</div>
            <div id = "socialmedia">
                <ul id = "socialicons">
                    <li>facebook</li>
                    <li>twitter</li>
                    <li>linkedin</li>
                </ul>
            </div>
        </header>
        <nav>
            <ul id = "mainmenu">
                <li>About Me</li>
                <li>My Portfolio</li>
                <li>Services Offered</li>
            </ul>
        </nav>
    </div>
</body>
</html>

and this the css code

#header{
height: 1000px;
}
#title{
float: left;
padding: 10px;
}
#subtitle{
float: left;
padding: 10px;
}
#socialicons{
padding: 10px;
float: right;
}
#socialicons li{
list-style-type: none;
display: inline;
}
#mainmenu li{
list-style-type: none;
display: inline;
}

Upvotes: 0

Views: 75

Answers (3)

koralarts
koralarts

Reputation: 2112

Here is my solution based on what you provided:

// Add padding to the mainmenu
#mainmenu {
  padding: 10px;
}

// Remove the margin on socialicons
#socialicons {
  margin: 0;
}

http://jsfiddle.net/Ey3jx/

Navigation below:

#mainmenu {
  /* other rules */
  clear: both;
}

http://jsfiddle.net/Ey3jx/2/

Upvotes: 1

Osama Yawar Khawaja
Osama Yawar Khawaja

Reputation: 309

Here is another solution to your problem.

Try to keep your css simple and clean. Use classes or id`s like left and right

Example: 

 #left{float: left;}
 #right {float:right;}

Solution to your problem: JsFiddle

Upvotes: 1

mddw
mddw

Reputation: 5580

Your header contains only floated elements. Its height is 0px. The nav is just under this 0px header.

So, two ways to solve this :

1/ giving a fixed height to your header.

2/ using a clearfix. The best one is this micro-clearfix.

cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Just add a .cf class to your header, it'll do the work.

Upvotes: 1

Related Questions