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.
Related
I have two buttons in my header with variable X position, like this :
But if the user resize the browser window to a too small width, the "A" and "B" buttons comes upon the logo (Like in third exemple). How could I avoid that ?
P.S. Sorry if my english is not that good
You should insert the logo in a div and from the css made his position relative and float it to the left, then you should do the same with the buttons. I've made an example for you there, maybe you can also set a min-width
http://jsfiddle.net/n3gmsgto/
HTML:
<div id="headbar">
<div id="logo">Logo</div>
<div id="A">A</div>
<div id="B">B</div>
</div>
CSS:
#headbar{
background-color:#0099ff;
height:100px;
width:100%
}
#logo{
position:relative;
float:left;
width:70%;
//or maybe min-width:x%;
}
#A{
position:relative;
float:left;
width:15%;
}
#B{
position:relative;
float:left;
width:15%;
}
Is also possible to arrange them in different ways to obtain similar results.
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.
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.
Ive had quite some problems with positioning elements with CSS related to people using differently sized screens. Whats a bulletproof way to position elements so that they keep their position on the screen no matter how big the viewport is?
We have got 2 simple examples here.
In demo 1, div will always stick to top left of the screen regardless of screen size/resolution.
DEMO 1
<div id="test">This div will always appear on top left by default regardless of screen size.</div>
#test{ width:150px; height:150px; background-color:#666; }
This one will always stick to right hand side with some margin
DEMO 2
<div id="test">This div will always appear on right hand with 100 margin.</div>
#test{float:right; margin-right:100px; width:150px; height:150px; background-color:#666; }
wraped div. For example:
html:
<div class="wraped">
<div class="someDiv">
Hi
</div>
<div class="someDiv">
Hi reloaded
</div>
</div>
css:
.wraped {
background:grey;
width:500px;
height:300px;
margin:auto
}
.someDiv {
width:230px;
text-align:center;
padding:10px;
background:#ccc;
outline:1px solid black;
float:left;
}
You can preview this in http://jsfiddle.net/wandarkaf/2VVcm/
Please see the image below. Assume that these are all divs with the given ids. Also, let's assume that they carry the same weight semantically so they should be at the same point in the html hierarchy:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
What is the proper CSS to position them correctly so as to appear as in the image below? The solution should flow properly as the browser is resized and preferably work on >=IE7.
Think of this as an action panel (#1) and 3 information displays (#2, #3, #4) so it is probably expected for 2,3,4 to expand in width to fill the browser window and flow below the action panel as the browser shrinks.
Use this
#id1, #id2, #id3, #id4{ float:left; }
#id1{ width:50%; height:300px; background-color:red; }
#id2{ width:50%; height:50px; background-color:blue; }
#id3{ width:25%; height:250px; background-color:green; }
#id4{ width:25%; height:250px; background-color:yellow; }
demo at http://jsfiddle.net/gaby/wsEt6/
I altered your ids as they are not allowed to be numeric.
http://www.w3.org/TR/html4/types.html#h-6.2
EDIT: I just read the bottom piece, so my example is fixed (width)...
An id can't be a number, but to keep your example I'll use the numbers spelled out.
CSS:
.container { overflow:hidden; /* Clear Floats */ width:400px; }
#one, #two, #three, #four { float:left; }
#one { width:200px; }
#two { width:200px; }
#three { width:100px; }
#four { width:100px; }
Example: http://jsfiddle.net/DOSBeats/CqSTY/
I would suggest to use container divs for those. Something like this:
<div id="one" class="left"></div>
<div class="right">
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>
Wrap #1, #2, #3, #4 in a container div, #0.5. Float the #1 div left and have a width of 50%. Wrap #1, #2, #3 in a container div named, #container - float that right with a width of 50%.
Do the same thing for the divs inside #container
check if this helps you out just remember to modify divs as you need it all in the div play with them according to the screen size you need :
http://jsfiddle.net/z747R/