The content of hr tag flow around floating elements as if it is inline elements (even if it is actually blocks). That's what I need but unfortunately hr can't have child elements except two pseudo elements.
Take a look on this demo on JsFiddle: http://jsfiddle.net/P3KEZ/
<div id="right"></div>
<div class="divider"></div>
<hr class="divider" />
#right{
background: #ffaaaa;
width: 200px;
height: 300px;
float: right
}
.divider {
background: #4d9d4d;
height: 20px;
border: none;
position: relative;
}
.divider:after, .divider:before {
content: " ";
width: 20%;
height: 100%;
display: inline-block;
position: absolute;
background: #a2a2f2;
top: 0;
}
divider:before {
left: 0;
}
.divider:after {
right: 0;
}
What I actually want is to get element with content flow around the floating elements (like hr do) but also can have at least 3 child elements (like div can do).
So question is: how to emulate such behaviour in div? (without display: flex)
What I actually want is to get element with content flow around the floating elements (like hr do) but also can have at least 3 child elements (like div can do).
So question is: how to emulate such behaviour in div?
You want to harvest the power of the mighty overflow property … (*thunderclap*)
.divider {
/* … */
overflow:hidden;
}
Normally, a block element is layed out behind a floating element, only its inline content floats next to the floated element – but with overflow:hidden you can change that, so that a block element like div only takes the space that is left beside the floating element. (It does not actually have to be hidden – everything besides the default value visible will trigger this behavior, so you can use auto or scroll as well if those suit your actual use-case better.)
See here: http://jsfiddle.net/P3KEZ/1/
Related
What does the following CSS rule do:
.clear { clear: both; }
And why do we need to use it?
I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...
I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...
Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.
Why do they float elements?
Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...
Live Example of the demo image.
Code For Demo
/* CSS: */
* { /* Not related to floats / clear both, used it for demo purpose only */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
header, footer {
border: 5px solid #000;
height: 100px;
}
aside {
float: left;
width: 30%;
border: 5px solid #000;
height: 300px;
}
section {
float: left;
width: 70%;
border: 5px solid #000;
height: 300px;
}
.clear {
clear: both;
}
<!-- HTML -->
<header>
Header
</header>
<aside>
Aside (Floated Left)
</aside>
<section>
Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
Footer
</footer>
Note: You might have to add header, footer, aside, section (and other HTML5 elements) as display: block; in your stylesheet for explicitly mentioning that the elements are block level elements.
Explanation:
I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.
No floats for header, next comes the aside tag which I'll be using for my website sidebar, so I'll be floating the element to left.
Note: By default, block level element takes up document 100% width,
but when floated left or right, it will resize according to the
content it holds.
Normal Behavior Of Block Level Element
Floated Behavior Of Block Level Element
So as you note, the left floated div leaves the space to its right unused, which will allow the div after it to shift in the remaining space.
div's will render one after the other if they are NOT floated
div will shift beside each other if floated left or right
Ok, so this is how block level elements behave when floated left or right, so now why is clear: both; required and why?
So if you note in the layout demo - in case you forgot, here it is..
I am using a class called .clear and it holds a property called clear with a value of both. So lets see why it needs both.
I've floated aside and section elements to the left, so assume a scenario, where we have a pool, where header is solid land, aside and section are floating in the pool and footer is solid land again, something like this..
So the blue water has no idea what the area of the floated elements are, they can be bigger than the pool or smaller, so here comes a common issue which troubles 90% of CSS beginners: why the background of a container element is not stretched when it holds floated elements. It's because the container element is a POOL here and the POOL has no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won't stretch.
Normal Flow Of The Document
Sections Floated To Left
Cleared Floated Elements To Stretch Background Color Of The Container
(Refer [Clearfix] section of this answer for neat way to do this. I am using an empty div example intentionally for explanation purpose)
I've provided 3 examples above, 1st is the normal document flow where red background will just render as expected since the container doesn't hold any floated objects.
In the second example, when the object is floated to left, the container element (POOL) won't know the dimensions of the floated elements and hence it won't stretch to the floated elements height.
After using clear: both;, the container element will be stretched to its floated element dimensions.
Another reason the clear: both; is used is to prevent the element to shift up in the remaining space.
Say you want 2 elements side by side and another element below them... So you will float 2 elements to left and you want the other below them.
div Floated left resulting in section moving into remaining space
Floated div cleared so that the section tag will render below the floated divs
1st Example
2nd Example
Last but not the least, the footer tag will be rendered after floated elements as I've used the clear class before declaring my footer tags, which ensures that all the floated elements (left/right) are cleared up to that point.
Clearfix
Coming to clearfix which is related to floats. As already specified by #Elky, the way we are clearing these floats is not a clean way to do it as we are using an empty div element which is not a div element is meant for. Hence here comes the clearfix.
Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your wrapper element holding floated elements. This element won't exist in your DOM literally but will do the job.
To self clear any wrapper element having floated elements, we can use
.wrapper_having_floated_elements:after { /* Imaginary class name */
content: "";
clear: both;
display: table;
}
Note the :after pseudo element used by me for that class. That will create a virtual element for the wrapper element just before it closes itself. If we look in the dom you can see how it shows up in the Document tree.
So if you see, it is rendered after the floated child div where we clear the floats which is nothing but equivalent to have an empty div element with clear: both; property which we are using for this too. Now why display: table; and content is out of this answers scope but you can learn more about pseudo element here.
Note that this will also work in IE8 as IE8 supports :after pseudo.
Original Answer:
Most of the developers float their content left or right on their pages, probably divs holding logo, sidebar, content etc., these divs are floated left or right, leaving the rest of the space unused and hence if you place other containers, it will float too in the remaining space, so in order to prevent that clear: both; is used, it clears all the elements floated left or right.
Demonstration:
------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------
Now what if you want to make the other div render below div1, so you'll use clear: both; so it will ensure you clear all floats, left or right
------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
The clear property indicates that the left, right or both sides of an element can not be adjacent to earlier floated elements within the same block formatting context. Cleared elements are pushed below the corresponding floated elements. Examples:
clear: none; Element remains adjacent to floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-none {
clear: none;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>
clear: left; Element pushed below left floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 120px;
background: #CEF;
}
.clear-left {
clear: left;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>
clear: right; Element pushed below right floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-right {
clear: right;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>
clear: both; Element pushed below all floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-both {
clear: both;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>
clear does not affect floats outside the current block formatting context
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.inline-block {
display: inline-block;
background: #BDF;
}
.inline-block .float-left {
height: 60px;
}
.clear-both {
clear: both;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="inline-block">
<div>display: inline-block;</div>
<div class="float-left">float: left;</div>
<div class="clear-both">clear: both;</div>
</div>
CSS float and clear
Sample Fiddle
Just try to remove clear:both property from the div with class sample and see how it follows floating divs.
Mr. Alien's answer is perfect, but anyway I don't recommend to use <div class="clear"></div> because it just a hack which makes your markup dirty. This is useless empty div in terms of bad structure and semantic, this also makes your code not flexible. In some browsers this div causes additional height and you have to add height: 0; which even worse. But real troubles begin when you want to add background or border around your floated elements - it just will collapse because web was designed badly. I do recommend to wrap floated elements into container which has clearfix CSS rule. This is hack as well, but beautiful, more flexible to use and readable for human and SEO robots.
When you want one element placed at the bottom other element you use this code in CSS.
It is used for floats.
If you float content you can float left or right... so in a common layout you might have a left nav, a content div and a footer.
To ensure the footer stays below both of these floats (if you have floated left and right) then you put the footer as clear: both.
This way it will stay below both floats.
(If you are only clearing left then you only really need to clear: left;.)
Consider the following HTML and CSS:
<div class="container">
<span>This text appears inside a span tag which is an inline element.</span>
<p>This text appears inside a paragraph tag which is a block element.</p>
<span>This is another inline element.</span>
</div>
.container {
overflow: hidden;
}
Based on my understanding from the following SO question, by adding overflow: hidden to the .container class will establish the div as a new Block Formatting Context.
Question
How does this affect the span and p tags inside of the div? Specifically, what does creating a new block formatting context actually do to its children elements (in this case, inline span elements and a block p element)?
Related Question
What is an example of an Inline Formatting Context getting created? Can someone provide a HTML example and explain how it is established? What does the inline formatting context actually do to its children elements?
A block formatting context is a tool to help browsers render elements. It prevents tricky cases, so it's not really visual.
For example, float elements are not in the page flow. So other elements could be under or wrap around a floating element.
.float {
float: left;
width: 50px;
height: 50px;
margin: 10px;
background: turquoise;
}
.container {
height: 100px;
margin-left: 30px;
background: tomato;
}
<div class="float"></div>
<div class="container"></div>
So what should happen if we add a overflow: hidden to the .container element? Should the float element be cut because its over it? But the floating element is not actually inside the container...
It's one of the tricky cases, so browsers declared that overflow: hidden would trigger a safe rendering mode: Block formatting context. It will prevent the container from being around floating elements or to contain elements that are floating outside of its scope.
.float {
float: left;
width: 50px;
height: 50px;
margin: 10px;
background: turquoise;
}
.container {
height: 100px;
background: tomato;
/* BFC */
overflow: hidden
}
<div class="float"></div>
<div class="container"></div>
It seems that inline formatting context is the normal way that browsers render inline elements, those that are not rendered as block formatting context.
This rendering mode allows several elements to be on the same line. Their flow is affected by the writing direction, font-size, line-height... It also can be cut to be wrapped on several lines, etc.
I have two elements, both with display: inline-block, and the parent has white-space: nowrap.
When the screen is resized, the div on the right side don't resize, like this.
I'm trying to make only the blue div resize.
Full source (jsfiddle)
The structure of the html is like this:
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
<article>...</article> <!-- blue -->
</div>
Relevant css:
* {
box-sizing: border-box;
}
div.container {
margin: 0 auto;
max-width: 40em;
padding: 0;
white-space: nowrap;
}
div.container > * {
white-space: normal;
}
.aside {
display: inline-block;
max-width: 15em;
vertical-align: top;
}
.article {
display: inline-block;
max-width: 25em;
}
Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:
What I've found is that setting position: relative on the .container
and position: absolute on the .article does what I want.
An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.
The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.
And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like
article {
background-color: #a0f4ec;
display: inline-block;
position: absolute;
right: 0;
left: 30%;
}
div.aside {
background-color: #faf;
display: inline-block;
max-width: 15em;
width: 30%;
}
This trick also applies in a vertical sense, but with height, top and bottom properties.
There are a few ways to do it.
Method 1:
two divs the same line, one dynamic width, one fixed
Method 2 (negative margins)
http://alistapart.com/article/negativemargins
Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.
What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.
Simplified fiddle
If anyone can explain why, I'll mark it as an answer.
I need to set a margin to the top of an element. The text must be within the element and have a top margin of N pixels.
Here is what I want to achieve:
Fiddle: http://jsfiddle.net/GRQNh/
CSS:
body {
height: 960px;
}
.breadcrumbs {
position: relative;
background-color: #eee;
height: 10%;
}
.name {
color: #000;
margin-top: 50px;
}
Thanks.
DEMO or you may be try with padding-top instead margin-top as follows
.name {
display:block;
color: #000;
padding-top: 50px;
}
Since .breadcrumbs has position: relative, set position: absolute; to .name.
JSFiddle
You need to add display: inline-block; to get the margin to work.
For instance,
.name {
color: #000;
margin-top: 50px;
display: inline-block;
}
Hope this helps.
For it to work you will need to make the element behave like a block element. A block element can have, for instance, margins or paddings.
However, you will want to keep it from being displayed like an actual block element, so you will want to keep its visual displacement the same (that is, inline).
Luckily, there is a css value for display which does exactly what you need:
display: inline-block;
Add this to the span (which is inilne by default) and it will behave like a block element while it will still look like an inline element.
You can also give up on margins at all and use padding-top: 50px.
in this case, you must specify the parent ELEMENT position relative and absolute position subsidiary and specify top: 0;
the <span> is an inline element. That means you cant apply margin or padding to it.
For the solution to your problem you have -at least- two options.
1.Change the container of your text to a block element, like <div>
so:
<span class="name">Name</span>
will become
<div class="name">Name</div>
2.Change the behavior of your span by making it a block or inline-block element with this css:
.name {
display:inline-block
/* rest of your css */
These two articles will give you a good idea of what is inline and block
http://www.impressivewebs.com/difference-block-inline-css/
http://css-tricks.com/almanac/properties/d/display/
I want to display 2 divs in a single line. I have a parent div and two child divs.I want to keep the width of first child div and parent div equal. So the header(label of first child div) displays always middle position of parent div and I want to display the second child div at the right side in the same line of parent div.(Condition is always label of first child div should display middle of parent div). Here is the jsfiddle.
If I were styling this header section for a website, and I wanted some flexibility in styling the various elements, here is out I would start.
For my HTML:
<div class="head">
<div class="innerfirst">
<h1>ABCDEF GHIJ</h1>
</div>
<div class="innersecond">
<label>RIGHT1</label>
<label>RIGHT2</label>
</div>
</div>
I would put the page title in a <h1> tag so that I can adjust font-size, padding, background color and so on. In fact, you could add a tag line below the title line and various background images. Having .innerfirst and h1 gives you quite a bit of flexibility.
The <label> tags don't make sense semantically in this context, but perhaps you will have have input fields later like a search box.
For the CSS:
.head {
background-color:#2191C0;
width: 100%;
height: 85px;
position: relative;
}
The above is fine, set position: relative so that you can use absolute positioning for one of the child elements. The fixed height is a good idea, makes it easier to adjust elements vertically.
.innerfirst {
}
.innerfirst h1 {
text-align: center;
color: #FCFCFC;
padding-top: 10px; /* You could also use a margin... */
}
By default, .innerfirst will have 100% width since it is an in-flow block element, same with the h1 element. You can center the text within h1, and adjust color, padding and margin as needed.
.innersecond {
border: 2px solid lightgray;
color: white;
position: absolute;
width: 25%; /* Set this or by default it will shrink-to-fit content */
height: 61px; /* Set this or by default it will shrink-to-fit content */
top: 5px;
right: 5px;
padding: 5px;
}
What you could do is create a box of text and absolutely position it to the right. It is a good idea
to set a height and width otherwise, as a result of the absolute positioning, the div will shrink to fit the content, which is sometimes useful. The top and right offsets will position the .innersecond to the top-right of the parent container because you set position: relative in .head.
.innersecond label {
display: block; /* optional if you want block behavior */
border: 1px dotted white;
}
Finally, if you want the label tags to behave like blocks, use display: block and style according to you design requirements.
For reference, demo fiddle: http://jsfiddle.net/audetwebdesign/qpb9P/
Here's an updated jsfiddle. Read up on the display property!