<div id="foo">
<div class="bar">
there are very many divs like this
</div>
</div>
CSS
#foo{
margin: 10px auto;
min-height: 400px;
min-width: 800px;
}
.bar{
float: left;
text-align: left;
width: 450px;
min-height: 280px;
}
The div #foo can have a variable width from 800px to 100% of containing media and that the div .bar can have a variable height. On wide displays I want three columns of .bar divs but since they are variable height it's like they slide to the left of the div above hence those on the left have spaces above them. How do I make them float upwards. I hope I made sense.
I suggest you look at this post: Does anyone know how Pinterest.com's layout works? and possibly these jQuery plugins: http://masonry.desandro.com/ and http://www.wookmark.com/jquery-plugin.
A CSS3 solution: http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
Related
I have a floating central DIV with 2 divs inside it. I would like to have the left side DIV set with a fixed width and the right hand div to be responsive. I just am unable to make it work.
I am looking for a better way to do achieve this result. My original code is below:
CSS
div#content {max-width: 1140px; min-width: 960px; margin:0 auto; }
div#left {width: 100px; float: left;}
div#right {background:#F63; min-width: 860px; max-width: 1040px; float:left; }
HTML
<div id="content">
<div id="left">Left Content </div>
<div id="right">Right Content </div>
</div>
Take a look at this question, it seems to address your problem: CSS side by side div with Pixel and Percent widths
They suggest to give #right a margin-left the same size as the #left div
I made a fiddle with the changes below:
div#content {width: 100%; margin:0 auto; }
div#left {width: 100px; float: left;}
div#right {background:#F63; margin-left: 100px; }
Does it look like what you were hoping for?
I assume since you want responsive you do not want the bottom scroll bar to appear.
Since you want responsive you need to do the math on the with to become a %.
I took your max-width:1140px; as a basis and made the max-width 88% (the % value of the remainder of the 1140 after the fixed 100px was removed.
This allowed for the responsiveness. For a minimum width I applied 70% just so the area did not push below the left div (due to the float:left;)
here is the working fiddle:
http://jsfiddle.net/pur4z/2/
CSS
div#content {max-width: 1140px; margin:0 auto; }
div#left {width: 100px; float: left;}
div#right {background:#F63; min-width:70%; max-width:88%; float: left;}
HTML
<div id="content">
<div id="left">Left Content </div>
<div id="right">Right Content </div>
</div>
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I'm very new to XHTML and CSS and I can't get the floats to work. Somehow I keep ending up with "fondo_header" below and on the right hand side of "wrapper".
This is the HTML code:
<div id="header">
<div id="wrapper">
<div id="figure">
<img src="images/logo_2nd_225x1182_forWeb.jpg" alt="Logo" width="225" height="118">
</div>
</div>
<div id="fondo_header">
<div id="nav">
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</div>
</div>
</div>
And the CSS:
#header{
margin-top: 20px;
width: 70%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#fondo_header{
width: 74%;
float: right;
background: url(images/header.jpg);
}
#wrapper{
width: 250px;
/*float:left;*/
height:auto;
background-color:#f2dfce;
}
I need to put "wrapper" and "fondo_header" right next to each other. The width for all divs should be correct, I've also tried pixels, different widths, adding margins, padding, different floating styles and way too many things but nothing works.
I've tried IE9, Chrome and FF with the same results. Margins and paddings have been reset.
I'm pretty sure I'm overlooking something pretty obvious at this this point.
Any help much appreciated.
in case ur using floating
the floating element's width should not exceed width of container else one will go on the second line
in ur case 74% for fondo_header + 240px for wrapper is greater then width of header
u can fix that by setting width of wrapper to 26%
or setting static values for both
You have to float both #fondo_header and #wrapper to the left. And when you float elements you have to set overflow: hidden on the parent element, so it fits its content's height.
Take a look at this, it will help you understand floats better: All About Floats.
Edit: Floating #wrapper to the left and #fondo_header to the right also works.
Seems to work alright for me as long as the header is small enough to fit. Are you sure you're giving each element enough room? Using percentages for width of one element and pixels for the other are going to give you different results depending on your screen width.
#header{
margin-top: 20px;
width: 70%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#fondo_header{
width: 30%;
float: right;
background: url(images/header.jpg);
}
#wrapper{
width: 250px;
float:left;
height:auto;
background-color:#f2dfce;
}
http://jsfiddle.net/ARvw3/
Yo. There's a tendency in placing divs to follow each other vertically, but what i'm trying to accomplish right now is to is basically to place a number of divs (two) inside a parent div like so:
<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>
And i'd like to place 'anotherone' just to the right of 'onediv'. Sadly, float:right is pretty much ruining the layout with the divs popping out of their parent divs and whatnot. Any suggestions are welcome.
Edit: It might be worth noting that the parent div and 'anotherone' has no height elements at all, with 'onediv' planned to be thought as the "height support" div, allowing the contents of 'anotherone' to make the parent div larger at will.
Edit again: Here's the CSS for the specified stuff:
.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
{
width: 20%;
margin: 5px;
border: solid black 1px;
height: 180px;
}
.secondchild
{
width: 60%;
border:solid black 1px;
margin: 5px;
}
You can float both inner divs and give the outer div an overflow so that it grows with the inner divs.
Example:
#parent {
overflow: hidden;
}
#parent div {
width: 50%;
float: left;
}
Try this:
<div id="parent">
<div id="onediv" style="float:left;"></div>
<div id="anotherone" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
I think this is what you want (note the re-ordering of DOM elements):
<div id="parent">
<div id="anotherone"></div>
<div id="onediv"></div>
</div>
/*CSS*/
#anotherone{
float:right;
width:50%;
}
#onediv{
float:left;
width:50%;
}
Note, if this is what you want, IE6 will still mess it up. ;-)
You certainly need to specify a width as indicated in #Kevin's answer to get the layout you described, simply specifying float left/right will not have the desired effect. Try specifying the width in pixels rather than a percentage. Failing that or if that's not appropriate for you, I think you possibly need to specify the width of the outer div (through css if you like).
#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }
Just use the <span> tag. Its the equivalent of except it doesn't start a new row.