I have a div (navigation) that is "float:left;".
After this div main content comes. And second divs comes over the first one.
If I add style="clear:both;" after the first dif, then it works.
However, i wonder if this is the right way to do this, this is my only question.
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
<div style="clear:both;"></div>
<div id="content-wrapper"></div>
.nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
.nav li{
float: left;
margin: 0 2px;
}
.nav li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #fff;
border-right: 1px solid #ccc;
background-color: #3b3d49;
-webkit-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
}
Yes, that works fine. However, you don't need another element to clear the content, you can add the style to the content wrapper.
In your style sheet:
#content-wrapper { clear: both; }
Another approach is to add a container around the floating element, and make it contain its children using the overflow style:
<div class="nav-container">
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
</div>
<div id="content-wrapper">
</div>
Then in your style sheet add:
.nav-container { overflow: hidden; }
The main use of the above mentioned "clear:both"
The clear property specifies which sides of an element where other floating elements are not allowed.
"clear:both"
means No floating elements allowed on either the left or the right side.
In answer to your question, cleaning floats with clear:both; is a pretty standard way of doing this, yes.
this is the best way, just add class .group to your container
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
yes it is correct to see this example from the creators of html
http://www.w3schools.com/cssref/pr_class_clear.asp
You could use <br clear="all" /> for short hand. And another way is that you could use clearfix method, you could search it on google for the best. this is the method that #conner explained it.
Related
I am trying out "flex" with CSS.
I cannot get my nav bar to move to the right. I have tried for hours using margin, changing displays, using float. It won't move passed the middle... Sorry i'm still learning
I have pasted a link to my codepen to show you a better picture:
https://codepen.io/Saharalara/pen/pGyQWZ
The HTML
<div id="page-wrapper">
<header>
<div class="logo">
<img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic">
<span id="logo-name">Minnie & Friends Inc</span>
</div>
<nav id="nav-bar">
<ul id="nav-ul">
<li class="nav-link">Stories<li>
<li class="nav-link">Toys<li>
<li class="nav-link">Suscribe</li>
</ul>
</nav>
</header>
<body>
<container id="container1">
<section>
<h1 id="stories">Minnie & Friends Stories</h1>
<p>
Here you will find all of the best Minnie & Friends toys
and stories.
Choose from a huge variety of stories and the happy gang and they go on
many adventures.
</p>
<section>
<iframe id="video" height="180" src="https://www.youtube.com/watch?
v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
</section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
Here you will also find many of your favourite characters
to choose from and order to arrive at your doorstep to continue their
adventures with you.
</p>
<h3 id="suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>
The Css
#page-wrapper {
position: relative;
color: black;
margin: -9px;
padding: 10px;
border: 4px solid;
border-radius: 3px;
background-color: rgba(223, 42, 42, 0.20);
padding: 10px 20px 20px 20px;
}
header {
display: flex;
font-size: 1.3em;
margin-left: -10px;
margin-right: -10px;
background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink-
white-star-polka-dots-background-vector-7590766.jpg');
opacity: 0.80;
}
#header-img {
height: 120px;
}
#logo-name {
font-size: 2em;
color: black;
}
h1,
h2,
h3 {
font-size: 2em;
}
//navigation bar
#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}
#nav-ul {
list-style-type: none;
display: flex;
}
nav li {
padding: 4px;
}
//body
p {
font-size: 1.2em;
}
#video {
border: 5px solid;
border-radius: 3px;
color: pink;
}
Fix 1
The best way to fix this (to me) is to control layout at the flex container (parent) level. It's straightforward and declarative.
header {
…
justify-content: space-between;
}
Fix 2
Another way is to add flex-grow: 1 to your #nav-bar.
#nav-bar {
…
flex-grow: 1;
}
In this instance, setting flex-grow to 1 tells the element to take up the available space in its flex container.
Fix 3
The non-flexbox way would be to add a left auto margin to the #nav-bar, effectively pushing it as far right as possible.
#nav-bar {
…
margin-left: auto;
}
since your header has display: flex property, his childs act like flex items.
So if you want to move whole .nav-bar to right you have to set margin-left: auto to .nav-bar so that element will be pushed to right.
Means .nav-bar will have as big margin as can without breaking on new line from left so element will move to right.
Since the Header element is the container just add justifi-content: space-between; and this will force the elements to go left and right. Another way is to put position: absolute; right: 0; to the nav-bar container but the first way is cleaner.
I have a row of distinct images that I want to use as a banner. Upon resizing, I don't want the last image(s) to wrap. I've done prerequisite google and search on stackoverflow; the examples I found were regarding text, not images.
Here's the jsfiddle: http://jsfiddle.net/pHytx/
The most relevant part of the code is probably the CSS:
#slidebanners {
width:100%;
}
#slidebanner ul{
padding: 0;
margin: 0;
overflow: hidden;
}
#slidebanner li{
float: left;
}
#slidebanner img{
height: 200px;
}
.page-header {
font-size: 2em;
padding: .5em;
margin-top: 15px;
}
The problem with this solution is that it doesn't get rid of the gap between the pictures; float gets rid of that gap. I could add a negative left margin, but that has weird effects because the negative margin gets applied unevenly (i.e. the rightmost image needs the most negative margin, but this affects the size of the leftmost image)
For this you can use the exotic display:table-cell;
See Demo:
http://jsbin.com/OxEPuJi/1/edit
Basically display:table-cell; prevents elements to drop on the next line. EVER!
And it also forces them to be next to each other without float.
Codes:
.img {
display:table-cell;
}
I apply this to the wrapper element which holds each image in my demo.
It's best to go for white-space: nowrap combined with display: inline-block, as shown in the accepted answer to the question you linked to.
The problem then becomes how to remove the gaps between the lis.
Here's a demo: http://jsfiddle.net/thirtydot/pHytx/4/
I went with removing the whitespace between the elements in the HTML.
Some people don't like editing their HTML to remove the gaps. To those people I say: deal with it. This is the easiest way to remove the gaps.
<ul>
<li>
<img src="media/images/slides/olympic-1.jpg" />
</li><li>
<img src="media/images/slides/olympic-2.jpg" />
</li><li>
<img src="media/images/slides/olympic-3.jpg" />
</li><li>
<img src="media/images/slides/olympic-4.jpg" />
</li><li>
<img src="media/images/slides/olympic-5.jpg" />
</li>
</ul>
#slidebanner ul {
white-space: nowrap;
padding: 0;
margin: 0;
list-style-type: none;
}
#slidebanner li {
display: inline-block;
vertical-align: top;
}
#slidebanner img {
height: 200px;
vertical-align: top;
}
To hopefully stop these pesky downvotes, here is a working implementation of the display: table-cell approach, thanks to user1721135 for the idea.
http://jsfiddle.net/thirtydot/pHytx/5/
#slidebanner {
float: left;
border: 1px solid red;
}
#slidebanner ul {
display: table;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
#slidebanner li {
display: table-cell;
vertical-align: top;
}
#slidebanner img {
height: 200px;
vertical-align: top;
}
.page-header {
clear: both;
font-size: 2em;
padding: .5em;
margin-top: 15px;
}
I was just adapting a webdesign, when I found a problem and couldn't slove it on my own.
I coded a heading and an article picture, both in the same div, with a border at the bottom of the div.
My problem: The border comes right after the title and doesn't integrate my picture.
Check out this fiddle to see what i mean: Click me!
Here is my code:
<div class="latestarticle">
<a class="articletitle" href="#" >Guitar Hero Experts Melt Your Face Off</a>
<div class="articlepicture">
</div>
and CSS:
.latestarticle {
border-bottom: solid 1px #CCC;
padding: 0px;
margin-top: 12px;
font-size: 12px;
}
.articletitle {
color: #CD5700;
text-decoration: none;
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}
.articlepicture {
height: 76px;
width: 136px;
float: left;
margin-top: 12px;
margin-right: 9px;
border: solid #A3A3A3 2px;
}
I'm wondering why this is not working. This should work, anyway, add display: table; or display: table-cell; to your .latestarticle. It works fine. See Demo
Edit
Oh! I came to know this problem is happening because you have floated left to your .articlepicture and I hope you wanted to do as demo.
I have added <div class="articlegroup"></div> for your .articlepicture div and defined it display: inline-block;
DEMO
use css display: block to .articletitle
I think what you are looking for is a clearfix. You need to add a "clearfix" div as a sibling to a floated element if you want the parent to recognize the height of the floated element.
<div class="latestarticle">
<a class="articletitle" href="#">Guitar Hero</a>
<div class="articlepicture"></div>
<div class="clearfix"></div>
</div>
Then define the .clearfix style in css:
.clearfix { clear:both; }
use disply:inline-block; for latestarticle .see here http://jsfiddle.net/WEHw4/5/
I have the following html for a simple navigation:
<header>
<div class="login">
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</header>
I have the following css:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
float: right;
}
.login ul {
list-style: none;
margin: 0;
padding: 0;
}
.login li {
display: inline;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
}
I am using HTML5 boilerplate so my header is displayed as a block element. When I view the page in a modern browser the result looks like:
Why is the anchor padding extending outside of the red border/header element? What is causing this behavior?
Furthermore, when I view the same page in IE compatibility view, it now looks like:
Here it seems like the padding is not applied at all or cut off by the containing div. I tried setting a height for the div but the result was still the same. What is causing this behavior?
Thanks
Try putting a display:block on .login li a and put a float:left on the .login li
Also you can shorten your code and take out the unnecessary div and just put the class on the ul.
HTML:
<header>
<ul class="login">
<li>Link</li>
<li>Link</li>
</ul>
</header>
CSS:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
list-style: none;
margin: 0;
padding: 0;
float:right;
}
.login li {
float:left;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
display:block;
}
http://jsfiddle.net/KPzUv/
What you are seeing is the body margin or padding. Set the margin to zero and it should go away. This is probably also a follow on problem caused by "margin collapse" between the header and the body causing the padding of the following element to leak through but I don't have time to check right now.
I ran into this unusual Firefox-only (as far as I know - I only checked against Safari and Chrome, and was using Firefox 3.6) CSS bug today at work, and managed to reproduce the problem with a much smaller snippet of code, here:
<!DOCTYPE html>
<head>
<style>
/*
* A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
* added just to make sure it's not from weird browser padding/margin. Still happens
* if this is removed though
*/
html, body, div, span, p, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height: 1;
}
li {
list-style: none;
}
body {
color: #333;
font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
line-height: 1.3;
}
/* Some clearfix code from HTML5 Boilerplate */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div style="padding: 20px; border: solid thin black;">Hello!</div>
<div>
<ul class="clearfix">
<li style="float: left; padding: 5px; border: solid thin black;">There</li>
<li style="float: left; padding: 5px; border: solid thin black;">should</li>
<li style="float: left; padding: 5px; border: solid thin black;">be no</li>
<li style="float: left; padding: 5px; border: solid thin black;">margin</li>
<li style="float: left; padding: 5px; border: solid thin black;">above</li>
<li style="float: left; padding: 5px; border: solid thin black;">this</li>
<li style="float: left; padding: 5px; border: solid thin black;">list</li>
</ul>
<p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
</div>
</body>
</html>
Here's a screenshot of what the problem looks like
So what I'd normally expect to happen here is that there's no margin between the two <div>s, or above the <ul>, and indeed, hovering over elements in Firebug will show no margin/padding coloring. But for some reason, the 30px margin-top from the <p> is being applied to both the <p>, as well as its containing <div>. My guess is that something's buggy with the clearfix (and indeed, if you use a clearing <br/>, this problem goes away), but I'm curious if anyone has insight into what exactly the problem here is. Thanks!
That's correct, you are not using the right clearfix ;-)
This one should fix the issue:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
See:
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
BUT - the elephant in the room that isn't being mentioned is a Firefox float bug which affects at least 3.6-6 (tested). A float container styled with ':after { content:"" }' (where content is empty or any type or whitespace) will duplicate the margin-top of the following element! This only appears to affect Firefox and is clearly a bug.
Simple test case:
<div class="container cf">
<div class="floater"></div>
</div>
<div class="next">
<p>Some content here!</p>
</div>
<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>
http://jsfiddle.net/TjW6c/394/
You're not using the clearfix right. Using positioniseverything's clearfix(a.k.a. pie-clearfix) is usually my solution to all clearfixes:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
You can check it out here: http://jsfiddle.net/WVtYd/