I have this html code
<div id="b_container">
<div id="b_header">
<div class="header_left">link 1 </div>
<div class="header_left">link 2 </div>
<div class="header_left">link 3 </div>
</div>
<div id="b_content">content goes here</div>
<div id="b_footer">footer goes here</div>
</div>
I used this css code
#b_container
{
margin-right: auto;
margin-left: auto;
background: red;
width:900px;
padding: 10px;
}
#b_header{
background: #FFF;
padding: 5px;
}
.header_left{
float: left;
width:100px;
background: #CCCC00;
}
#b_footer{
background: #FFF;
padding: 5px;
}
#b_content{
background: #00FFFF;
padding: 5px;
height: 100px;
}
but the result shows the three divs (with class header_left) above the b_content. why ?
You have to stop the floating from the divs (with class header_left). You can do it with adding following line to #b_header:
overflow: hidden;
Also see this example.
An alternative is to add an empty div with clear: both; as last one in the div with id b_header. See this example.
but the result shows the three divs (with class header_left) above the
b_content. why ?
This is because you are not clearing the floats, you can do so by using overflow:hidden property or adding a div with clear:both property as the last child of the parent div
container.
Basically, with flaots, you need to clear them, just create a div with this css: clear: both.
That should do the trick.
See more about floats here
Related
I'm trying to use inline-block divs to create a two-column feed (like google+ or pinterest), and for a number of reasons can't use CSS3 columns (partially because both columns should fill with the first elements, not just the first column). Ideally, I'd also like to avoid Javascript, but if that's impossible then whatever.
I've created this:
http://jsfiddle.net/JWjxP/1/
and am wondering why the div labeled '4' doesn't flow to fill the gap above it (like 3 does). I'd like for all the divs to begin at where the div above ends, with no space in between.
All the divs have the following rules (plus various heights):
.test1, .test2, .test3 {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
float: left;
}
and the wrapper has the following rules:
.content {
background: #999;
height: 100%;
text-align: left;
}
You can accomplish this by breaking your test divs into two parent divs and applying inline-block display to those parents instead of the test divs themselves. This allows content to flow freely within the parent, and allows the divs to be positioned beside one another with no "gap" above.
HTML:
<div class="pure-u-3-4 content">
<div class="left">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
<div class="right">
<div class="test3">4</div>
<div class="test1">5</div>
<div class="test2">6</div>
</div>
</div>
CSS:
.left, .right {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
margin-right:-4px;
vertical-align:top;
}
.test1, .test2, .test3 {
width:100%;
}
FIDDLE: http://jsfiddle.net/JWjxP/27/
I have two divs that are not nested, one below the other. They are both within one parent div, and this parent div repeats itself. So essentially:
<div id='parent_div_1'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_2'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_3'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
I want to get each pair of child_div_1 and child_div_2 next to each other. How can I do this?
Since div's by default are block elements - meaning they will occupy full available width, try using -
display:inline-block;
The div is now rendered inline i.e. does not disrupt flow of elements, but will still be treated as a block element.
I find this technique easier than wrestling with floats.
See this tutorial for more - http://learnlayout.com/inline-block.html. I would recommend even the previous articles that lead up to that one. (No, I did not write it)
#parent_div_1, #parent_div_2, #parent_div_3 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.child_div_1 {
float: left;
margin-right: 5px;
}
Check working example at http://jsfiddle.net/c6242/1/
I found the below code very useful, it might help anyone who comes searching here
<html>
<body>
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>
Using flexbox it is super simple!
#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}
Fiddle example
Using the style
.child_div_1 {
float:left
}
Best that works for me:
.left{
width:140px;
float:left;
height:100%;
}
.right{
margin-left:140px;
}
http://jsfiddle.net/jiantongc/7uVNN/
Using flexbox
#parent_div_1{
display:flex;
flex-wrap: wrap;
}
User float:left property in child div class
check for div structure in detail : http://www.dzone.com/links/r/div_table.html
I have a container on my test site:
#container {
margin: 0 auto;
}
Then I added the left vertical menu and on some small screens that menu is not fully visible.
Like my old laptop :-)
I want to keep the margin:auto setting in place but I want to move the whole #container a little bit to the right.
Could it be done some how?
I have tried #container {margin-left:10px;}, but to no avail.
Playing with firebug, it's good to use:
#container {
margin: 0 auto;
position:relative;
left:10px;
}
Hope it solves...
The simplest approach would be to introduce another element (or style another element if it's already available). Thus, you might have:
<div style="margin-left: 10px;">
<div id="container" style="margin: auto;">...</div>
</div>
That way the centering is being done within a container div that's already got the appropriate left-hand padding.
If you wrap your #container div in another div with double the left margin, that will work.
#wrap {
margin-left: 20px;
}
.centre { /* this would be your #container */
width: 100px;
height: 40px;
margin: auto;
background-color: #f00;
}
#wrap .centre {
background-color: #00f;
}
The HTML:
<div class="centre"></div>
<div id="wrap">
<div class="centre"></div>
</div>
http://jsbin.com/emogu3
Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link.
I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.
HTML Code:
<div class ="main-div">
<div class = "wrapper">
<div class ="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div class ="second-div">
//this only appears after clicking on a link
<form>
<textarea>
</textarea>
</form>
</div>
</div>
</div>
CSS:
div.wrapper {
width:inherit;
float:left;
bottom:6px;
position:absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div {
padding-top: 2px
}
div.main-div{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
padding:8px 13px 4px 13px;
min-height:61px;
position:relative;
}
Thanks in advance for any help.
I think the solution entails doing the following. Have a wrapper div:
<div id="my_wrapper">
content
</div>
Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.
<div id="my_wrapper">
<div id="visible_item">Item</div>
<div id="may_become_visible">Not Visible Now Item</div>
</div>
Then you can show/hide as necessary and position the inside content correctly.
Ok, with you updated question I believe I've created what you're looking for with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
HTML
{
margin: 0px;
padding: 0px;
height: 100%;
}
BODY
{
margin: 0px;
padding: 0px;
height: 100%;
}
div.first-div
{
width: inherit;
float: left;
bottom: 60px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div
{
display: none;
position: absolute;
float: left;
bottom: 0px;
}
div.main-div
{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
min-height:61px;
position:relative;
float: left;
height: 100%;
}
</style>
<div class="main-div">
<div id="firDiv" class="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div id="secDiv" class="second-div">
//this only appears after clicking on a link
<form>
<textarea></textarea>
</form>
</div>
this is my content
</div>
</body>
</html>
Now, what this does is absolute position both the first and second divs at the bottom of the page, positioned so that they don't overlap each other. If you don't like the fact that the first div is up so high from the bottom of the page, you can modify the first-div style as such:
div.first-div
{
width: inherit;
float: left;
bottom: 20px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
and then update the link to
<span>my link</span>
Basically, what you're doing there is changing the first div to be closer to the bottom of the page but then moving it when the link is clicked so that there's more room for the second div.
It's not solving the underlying issue of displaying a relative positioned div under an absolutely positioned div, but hopefully is resolves your specific problem.
Just a guess, but have you tried adding the style clear: both to the second div? I doubt it will help, but it might.
You can also try adding a top margin for the second div that is equal to the height of the first div. Basically, something like:
<div id="second-div" style="padding-top: 40px">
Where 40px is the height of the first div. The issue there is that you'd need to know what the height of the first div is and if it is variable then this approach will not help.
I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
This works good for me. I have divided the screen into two halfs: 20% and 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
When you float those two divs, the content div collapses to zero height. Just add
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
Another way to do this is to add overflow:hidden; to the parent element of the floated elements.
overflow:hidden will make the element grow to fit in floated elements.
This way, it can all be done in css rather than adding another html element.
None of the answers given answer the original question.
The question is how to separate a div into 2 columns using css.
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
The most flexible way to do this:
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden; to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
Here's something that works in simple cases:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
You can see it here: http://cssdesk.com/d64uy
Make children divs inline-block and they will position side by side:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
See Demo
You can use flexbox to control the layout of your div element:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}
<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>
Best way to divide a div vertically --
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Pure old school CSS
I know this post is old, but if any of you still looking for a simpler solution.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
If you don't care old browser and need a simple way.
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
Floats don't affect the flow. What I tend to do is add a
<p class="extro" style="clear: both">possibly some content</p>
at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
The trickery with the comments is for cross-browser compatibility.
This is best answered here Question 211383
These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.
Make font size equal to zero in parent DIV.
Set width % for each of child DIVs.
#content {
font-size: 0;
}
#content > div {
font-size: 16px;
width: 50%;
}
*In Safari you may need to set 49% to make it works.
Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.