I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
i have a main div has 100% width, and 2 divs in it. one has 200px width and other will be 100%-200px, i mean;
-----------------this is main div -------------
| |
| ----subdiv1---- -------------subdiv2----------|
|| | | ||
| -------------- ---------------------------- |
|-----------------------------------------------|
subdiv1 has 200 px, subdiv2's width will be rest of empty space. I search on google but couldnt find.
Here's one possible solution I hacked up using a float: left rule for the left-most div, and a margin-left rule for the right div: http://jsfiddle.net/P4xMj/
Example HTML:
<div id="container">
<div id="left">
Some content here
</div>
<div id="right">
Some more content goes over here on the right. Let's make this
content really long to see what happens when we wrap more than
one or two line's worth. Extra text to fill the void.
</div>
</div>
Example CSS (the background colors are just for visibility):
#container {
background: #FF0;
overflow: auto;
padding: 10px;
}
#left {
background: #0F0;
float: left;
width: 200px;
}
#right {
background: #F00;
margin-left: 210px;
}
You're going to want to add float:left; to your subdiv1. Here is a few lines of code that will produce what you have shown.
<div>
<div style="float:left;width:200px;background:#0F0">
SUBDIV1
</div>
<div style="background:#F00;">
SUBDIV2
</div>
</div>
In short, use float:left; on your subdiv1
You can float: left the left div, and have margin-left: 200px on the right div.
http://jsfiddle.net/SpxH9/
HTML:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS:
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
margin-left: 200px;
}
There's another technique you can use, which is to replace margin-left with overflow: hidden. This is useful because you don't have to have the dimension in there twice, and it adapts to changes more easily.
For example, with 10px borders: http://jsfiddle.net/SpxH9/1/
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
overflow: hidden;
}
If you try to do the same thing with the first technique I mentioned, you'll find that you have to manually calculate stuff: http://jsfiddle.net/SpxH9/2/ (and fixed: http://jsfiddle.net/SpxH9/3/)
Lastly, overflow: hidden on #container is used to contain the floats. You might wish to use clearfix instead.
consider you have a code like this, please read the comments as I thought this would be easier to understant :)
<div class="container">
<div class="inner_container">
<div class="left">
This div sometimes expands to the right and pushes right div off the screen
</div>
<div class="right">
bla bla bla
</div>
</div>
<div id='bottomcontent'>
This content is below both of the divs, and when div '.right' expands down, I don't want this div pushed down as well, but have the 'right' div go under it/or just make those parts disappear and not push this div down.
</div>
</div>
This is the CSS:
.container {
width: 796px;
overflow:hidden;
}
.left {
float: left;
width: 256px;
}
.inner_container{
width: 1396px;
}
.right {
float: left;
width: 796px;
}
Thanks a lot everyone, and if you have any questions I will try my hardest to explain anything that may be confusing to you, thank you ! :)
I think you can use overflow property here. Sorry if I am wrong as I can't understand your context clearly.
You can try this :
.left {
float: left;
width: 256px;
overflow:scroll;
}
to avoid pushing the right div off the screen.
and for bottomcontent class you can try using position:absolute
You can use position:absolute like this:
#bottomcontent {
position: absolute;
top: 30px;
left: 256px; /* same as width of .left */
background-color: white; /* if you dont want to see .right through #bottomcontent */
}
jsFiddle
On the webpage I'm working on here, I have a main div, and within the main div, and image div. Roughly speaking, the important HTML is:
<div id="wrapper">
<div id="main">
<div class="images">
<p>Content</p>
<div class="clear"></div>
</div>
<p>Text...</p>
<div class="clear"></div>
</div>
</div>
and the CSS:
div#wrapper
{
padding: 10px;
width: 90%;
}
div#main
{
padding: 5px;
}
div.images
{
float: right;
width: 320px;
margin-left: 5px;
}
div.clear
{
height: 0;
clear: both;
}
Apologies if the cause of the problem is not within the code here, but I think it is.
The problem is, when the images div becomes larges than the content of the main div, the wrapper div loses its left padding; and the bottom padding of main increases. The problem only seems to occur in IE7.
Turns out that giving #main hasLayout does the trick.
div#main
{
zoom: 1;
}
Put this in the IE7 stylesheet, and it's pretty much fixed. Still to large a border at the bottom, but not too important.
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.