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/
Related
I want some elements on one line and get their parent to an equal size to the kids, the only problem is when I put % margin on the children, then they do not fit
It works with pixels in margin instead but I need to use % in this case to make it work responsively
jsfiddle: http://jsfiddle.net/
html:
<div class="holder">
<div class="blue">
</div>
<div class="red">
</div>
<div class="green">
</div>
</div>
css:
.holder
{
background-color:yellow;
display:inline-block;
}
.holder > div
{
width:200px;
height:200px;
display:inline-block;
margin-left:2%;
}
.blue
{
background-color:blue;
}
.red
{
background-color:red;
}
.green
{
background-color:green;
}
update below css. check link jsfiddle
.holder
{
background-color:yellow;
display:inline-flex;
}
It wouldn't...If you use inline-block then the holder div collapses to the width of the contents. So 2% would be OK but if you add in the 6% (3 * 2%) then the holder gets wider and the margin would then be increased...and so on and so on ad infinitum.
What happens is the holder div keeps it's original size (since it can't be calculated due to the infinity margin loop) as though the 'extra space' wasn't applied but adds the margin in anyway (once) and the layout breaks.
SEE - http://jsfiddle.net/19s19oL7/
AS mentioned by Ankush Kondhalkar flexbox is a solution although support is relatively limited at present. In the interim, use px and media queries.
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.
I'm fairly confident this is one of those things that has been discussed endlessly out there in the internet, but I can't find a solution.
I need to float 2 divs on the same line as a paragraph. Both of the divs have variable width and I need the paragraph to shrink into the available space and wrap its contents so that none of the elements themselves wrap off the line.
I've set up a JSFiddle
HTML here:
<div class="icon"></div>
<p>This is a really long line of text that will need to wrap</p>
<div class="count"></div>
CSS here:
.icon {float:left; width:50px; height:50px; background-color:#4d4d4d; margin-right:10px}
p {margin:0; overflow:auto; display:inline-block}
.count {float:right; width:250px; height:50px; background-color:#ff0000; margin-left:10px}
I know that I can use Javascript to achieve this, but I'd much rather find a pure CSS solution.
Thanks.
Floats do not shrink or expand to fit the available space. A floated item always uses the required space of any children.
That is what flexbox was invented for.
.flex-column-container {
flex: 1 auto 1;
}
Alternatively you could use a table layout.
Please check this fiddle if this is what you are looking for http://jsfiddle.net/Mohinder/dEwuU/
here is HTML
<div class="main">
<div class="w_200"></div>
<div class="middle"></div>
<div class="w_200"></div>
</div>
here is css
body,div{
margin:0px;
padding:0px;
}
.main {
width:100%;
text-align:center;
min-width:404px;
background:black;
float:left;
}
.w_200 {
width:200px;
background:red;
height:100px;
float:left;
}
.middle {
height:100px;
background:red;
float:left;
width: 49.2%;
width: -webkit-calc(100% - 404px);
width: -moz-calc(100% - 404px);
width: calc(100% - 404px);
margin:0px 2px;
}
Got it. If I change the paragraph to display:block instead of inline-block and change the order of the elements so that the paragraph is the last in the markup it works perfectly.
Sorry for not well-explained title, but I will try my best to explain the problem here.
There is probably a very easy solution to this particular problem, if i can call it that way, but I just can't figure it out with using only css.
Basically I have a parent ('wrapper') div which has min-width set and 2 floated children. As I am creating a dynamic page, user will be able to click on the 'right' floated div, and when he clicks on it new content will be added inside that div.
Problem occurs if the user wants to resize the browser after adding content to the div. Because the width of the main wrapper will be increased (when user adds content) when user tries to reduce the browser width (resize the browser) the 'right' floated div will go to the new line.
So my question is: Is there any way (css) to disable div from moving to the new line?
Here is the link to the jsfiddle: http://jsfiddle.net/LKgbx/30/
HTML:
<div id="wrapper">
<div id="left">I'm left</div>
<div onclick="changeText()" id="right">I'm right</div>
</div>
CSS:
#wrapper{
min-width:400px;
background-color:#A3F8A9;
display:inline-block;
}
#left{
float:left;
width:300px;
background-color:red;
}
#right{
float:right;
background-color:blue;
}
JS:
function changeText(){
document.getElementById('right').innerHTML="Just adding some text to make div longer";
}
<script type="text/javascript">
function changeText(){
document.getElementById('right').innerHTML="Just adding some text to make div longer";
}
</script>
<style type="text/css">
#wrapper{
background-color:#A3F8A9;
position:relative;
}
#left{
position:absolute;
left:0px;
width:300px;
background-color:red;
}
#right{
position:absolute;
left:300px;
width:100%;
background-color:green;
}
</style>
<div id="wrapper">
<div id="left">I'm left</div>
<div onclick="changeText()" id="right">I'm right</div>
</div>
Try removing float:right; from #right
#right{
background-color:blue;
}
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.