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/
Related
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
I have three divs.. Container, Content_1 and content_2.
What I want to do is position the two content divs inside the container, side by side. now I have half accomplished that.. But the thing is I want my container to automatically resize to the div that is highest. so the container height must be auto. With the code I have written on JSFiddle, the content_2 on the right sets the container height, but the content_1 on the left does not.. Please help I am completely stuck.
HTML:
<div class="container">
<div id="content_1">
</div>
<div id="content_2">
</div>
JSFiddle
Is this what you wanted?
jsFiddle Demo
.container {
background-color: #000;
width: 980px;
min-width: 980px;
height: auto;
position: relative;
margin: 50px auto 100px auto;
top:60px;
bottom:900px;
border:1px solid #000;
overflow:auto; /* <========= */
}
your divs closing tag is open: </div to </div>
The problem is that you forgot the clearfix. There are a couple of ways to do a clearfix on google, but the one that will fix this problem is adding overflow:hidden to your container div.
Check out my example on http://cdpn.io/sEwfI
.container
overflow: hidden;
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>
<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
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.