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.
Related
i'm trying to create a header which contains 3 main elements centered on the page. On both sides of the 3 main divs i'd like to add another div which overflows the page by half it's width.
Like so. Both red divs are twice the length as shown, but overflow:hidden cuts them off.
This is easy enough to create but when i try to add the content of the blue diffs suddenly all of them slide down
I don't understand why this happens.
Furthermore when i add some content to the side divs everything falls back into place
So then i thought of just adding a nbsp; to the red divs to keep everything in position. Which worked. however when i try to center the content of the blue diffs vertically by adding a padding-top the red diffs move down for reasons unknown to me
here is my css
div.padded{
padding-top:20px;
}
.header{
width:100%;
border:2px solid black;
white-space:nowrap;
overflow:hidden;
}
.leftExtend{
width:25%;
margin-left:-12.5%;
background-color:red;
display:inline-block;
}
.middle{
width:25%;
background-color:blue;
display:inline-block;
}
.rightExtend{
width:25%;
background-color:red;
display:inline-block;
}
and the html
<div class="header">
<div class="leftExtend">sometext</div>
<div class="middle padded">aaa</div>
<div class="middle padded">bbb</div>
<div class="middle padded">ccc</div>
<div class="rightExtend">sometext</div>
</div>
I created a jsfiddle to demonstrate the problem.
Why does this happen, what am i doing wrong and what would be the correct way to achieve this behavior?
Try add vertical-align: top; to the divs:
.header div {
vertical-align: top;
}
The default is baseline which causes them to appear at the bottom.
JS Fiddle
I have few <div>s having display:inline-block, inside an absolute positioned parent <div>.
HTML
<div id='wrap'>
<div id='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'>#</div>
<div class='box'></div>
</div>
</div>
CSS
*{
margin:0;
}
html, body{
height:100%;
}
#wrap{
position:relative;
background:lightgreen;
height:100%;
}
#container{
position:absolute;
bottom:0px;
vertical-align:baseline;
}
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
}
When I add some ascii character codes in any of the <div>s, strangely other <div>s move up. if I remove the ascii character then all <div>s align perfectly in the same row.
check this JSFiddle
I am aware of other ways for making this layout, I can make the boxes absolute and force them to be positioned at the bottom of the parent, I'm aware of css3 flex.
But I'm interested in this specific problem, can somebody explain why is this happening..? or how can I fix it as it is?
Update
I am not interested in fixing it, since there are many ways to achieve the same alignment. I just want to understand what's happening. The question is, the divs are being being aligned at the bottom by default. Why does the other divs suddenly aligns at the top when one of the divs have character inside it?
Updated Fiddle with both scenarios
side note: this only happens when I add text inside the elements, if I add an HTML element instead of a character all divs still aligns at the bottom.
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
vertical-align: top;
}
add vertical-align: top;
when
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.
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.