I need the id3 displayed below id2 instead of being displayed on the side?
How can I accomplish it in using CSS?
html
<div class="main" ></div>
<div id="id1">Im in div1</div>
<div id="id2">Im in div2</div>
<div id="id3">Im in div3</div>
<div></div>
css
#id1{
background-color:green;
width:30%;
height:200px;
border:100px;
float:left;
}
#id2{
background-color:red;
width:20%;
height:100px;
border:100px;
float:left;
}
#id3{
background-color:yellow;
width:10%;
height:300px;
border:100px;
float:left;
}
http://jsfiddle.net/w9xPP/
the best way to do it is to not use floats. The only reason to use them is to make things horizontal to other things. If you want things to fit together like a puzzle, look at masonry.js
Set clear: left; on #id3 like
#id3{
clear: left;
background-color:red;
width:20%;
height:100px;
border:100px;
float:left;
}
When you use float it tells subsequent elements to attempt to display next to them rather than below. Using clear clears the floats and gets rid of that behavior.
http://jsfiddle.net/w9xPP/1/
It sounds like you might be trying to do columns. #Diodeus is right about the ULs and LIs. You will probably want to refactor that code. However, if you are trying to have two columns of elements you could wrap your elements in a div and float them instead of the items they contain. Your child elements would then be placed within the floated columns. You might also want to check out a grid system like the 960 Grid or Twitter Bootstrap.
Related
Does anyone know why the float:left isn't working? Basically, I have a div with class=boxscore_first, which is in the correct position. Then I have two more divs with class=boxscore which are appearing on top of the first. I want them to appear in sequence to the right of the first one. I want them to all float next to each other..
HTML
<div id="menu">
<div id="scoreboard"></div>
<div class="boxscore_first"></div>
<div class="boxscore"></div>
<div class="boxscore"></div>
</div>
CSS
.boxscore_first {
width:60px;
height:60px;
background-color:red;
margin-top:-60px;
margin-left:13px;
float:left;
}
.boxscore {
width:60px;
height:60px;
background-color:blue;
float:left;
margin-top:-60px;
margin-left:13px;
}
Actually, according to HTML you provided, you have three boxes. Left one and right one are .boxscore_first and the middle one is .boxscore.
Another and more relevant thing is that the .boxscore_first is a div. That means it's a block element. It doesn't float. In other words it wants to be alone in the line. You have to make both .boxscore_first and .boxscore float: left.
This is what I'm trying to achieve:
So far, this is the code I have.
The columns work like they should. The problem is that whatever I place after the columns in my HTML is actually behind the columns on the page, not beneath them like I want.
Would it be a problem with the css that I'm using for the "test-box" div?
.test-box{
background:red;
width:100%;
height:300px;
}
Is there a better way of doing this?
.test-box{
background:red;
width:100%;
height:300px;
clear:both;
}
clear: both will clear your other div from being affected by the floats, therefore placing it after
It can be done by adding a clear: both; to the CSS of the test-box:
.test-box{
clear: both;
background:red;
width:100%;
height:300px;
}
Add clear: both; or float: left; (if the 3 column divs take up the entire width.
you need to add
.test-box{clear:both;}
The jsFiddle
adding more always keep this at the end of a css
.clearfix {
clear:both;
}
and call it
<div class="test-box clearfix">
in this class
.three-columns div{
...
display:table-cell;
}
just remove the float:left and add display:table-cell
I personally wouldn't set the height in px unless you are 100% sure that the text will never change. there are different ways to achieve this, one way would be:
1) give a single class to each box ".box" for example
.box{
width:33.33%;
margin:20px 0 0 20px;
float:left;
}
also remember to clear:both what comes after these boxes.
This would be a responsive solution, although you can use a px based solution. It really depends on what the requirements are.
I have some elements I want to display. But sadly it does not work the way I want it.
Here is how it works:
http://jsfiddle.net/lukasoppermann/H3Nmg/7/
I want it so that the red boxes fill the space between the green box and the left side.
It needs to be dynamic though. The width of the container might change and the order of the elements can be different.
I would of course prefer a css-only way, but js is fine too. Does anyone have any tips?
// EDIT
To clarify, the elements cannot be hard-coded or floated to the right, because the number of elements, the width of the wrapper and also the number of green elements can vary. The order of the elements can vary too. I basically need the elements to arrange themselves without any wholes automatically.
Thats what I want.
http://img526.imageshack.us/img526/613/boxsorting.jpg
Hi you can define three div as like this
css
.container{
float:left;
margin-left:10px;
}
.top{
width:100px;
height:100px;
background:red;
}
.middle{
width:100px;
height:100px;
background:darkred;
margin-top:5px;
}
.right{
width:100px;
height:200px;
background:lightgreen;
float:left;
margin-left:10px;
}
.bottom{
float:left;
width:100px;
height:100px;
background:green;
margin-left:10px;
}
HTML
<div class="container">
<div class="top"></div>
<div class="middle"></div>
</div>
<div class="right"></div>
<div class="bottom"></div>
Live demo here http://jsfiddle.net/rohitazad/wyvrt/1/
What about using float:right to row-two div. You might have to fix the padding to make the green closer to red if you want. demo here http://jsfiddle.net/H3Nmg/9/
Should it look like this http://jsfiddle.net/H3Nmg/14/
Minus the hard coded width.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/H3Nmg/20/
demo: http://jsfiddle.net/H3Nmg/20/embedded/result/
Note: try to reduce the window size or width of the container div you will see the case and case output will come.
I know there must be a simple way to do this but for the life of me I can't figure it out.
I have a three column layout with a fluid center column and what I need to do is to take 3 images and distribute them evenly across the center div - such that the center image is always in the center of the center column (i.e. the center of the page) and the left image is justified left and the right image justified right.
the page uses a stripped down version of the faux absolute positioning demo as a framework, and there is no problem implementing that - but what I need is a self-contained way to arrange these three objects within the center div (column).
I have tried putting them in an Unorded List but when I float the elements to the left - well then they are floated to the left and no longer centered in the div.
I also tried doing it without the ul but have so far been unsuccessful.
any help here would be appreciated.
Let's say this is your markup:
<div class="wrapper">
<img class="first">
<img class="second">
<img class="third">
</div>
There are many ways to accomplish this, here is one way using known widths of the images:
img {
width:100px;
display:block;
}
.first {
float:left;
}
.second {
float:right;
}
.third {
margin:0 auto;
}
Demo: http://jsfiddle.net/wY6AS/
Here's another way with absolute positioning, and known widths:
.wrapper {
padding:10px;
position:relative;
}
img {
width:100px;
height:100px;
display:block;
}
.first {
position:absolute;
top:10px;
left:10px;
}
.third{
position:absolute;
top:10px;
right:10px;
}
.second {
margin:0 auto;
}
Demo: http://jsfiddle.net/wY6AS/1/
I wish I could make more demos and give better explanations, but I've got to run. Known widths makes it easy, but it is still not all that difficult with unknown widths, using display:inline-block and text-align:center on the parent element in combination with floats or absolute positioning, for example.
I don't want to suggest tables, but that's an option too if you are really desperate and can't get another method to work. Check out the CSS display properties that emulate table behavior as well.
I'm trying to build a page which will have a box-like layout..A top banner a bottom banner,two navigation panels(left and right) and some text that will appear in the middle.
Now I'm wondering if you can create something like that without using a table and without predefined/hardcoded values for margins.
Is that possible?
Thanks in advance
Mike
You can achieve centrally elastic three column layout with header and footer like this if that is what you mean?
With html:
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="bottom"></div>
And css:
#top,#bottom{
width:100%;
height:70px;
background:silver;
clear:both;
}
#middle{
background:green;
}
#middle,#left,#right{
height: 200px;
}
#left,#right{
width: 200px;
background:skyblue;
}
#left{
float:left;
}
#right{
float:right;
}
Fiddle: http://jsfiddle.net/hkrVz/
You can build any table-like structure using divs and display:table,display:table-row,display:table-cell and you won't be abusing table semantics in markup. It really depends if you need to support IE7 as I think these CSS properties were only introduced to IE8 (years after everyone else had them).
If that's going to be a problem then just look around for options with flexibility to do what you need. I can't really think why hardcoded margins would even be an issue so perhaps you need to explain what you are attempting in more detail.