how would you approach the design of the following layout without using any tables?
i have tried but cannot get the height of the 3 central div elements to 100% height.
any help would be appreciated. thanks in advance!
One very useful and easy solution I use for three equal height columns is the following: Make a wrapper which is positioned relative and with height:100%. Then all the children are positioned absolute and adding height:100%, will take the whole height of your wrapper. Because positioning them absolute will move it in the top-left side of your screen, you apply margin-left accordingly to move it in the right side of your browser.
html
<div id="wrapper">
<div id="first" class="column"></div>
<div id="second" class="column"></div>
<div id="third" class="column"></div>
</div>
css
body,html,#wrapper,.column {height:100%;}
#wrapper {position:relative;}
.column {position:absolute;border:1px solid black;width:33.3%}
#second {margin-left:33.3%}
#third {margin-left:66.6%}
Demo: http://jsbin.com/igoso4
I have tested the above method in firefox,chrome,safari,ie 7,8+, opera.
Related
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I have some relatively positioned containers (that vary in height) and I want to display them under each other. What's happening is they are displaying on top of each other (see fiddle).
I am using position:relative on the containers because I want the child elements to have position:absolute and display relative to their container. I think there is probably a quick fix with a fixed height for example but that isn't very flexible, my containers (or their children) will vary in height.
Desired result - fiddle
Actual result - fiddle
Code:
<style type="text/css">
.outside
{
position:relative;
border:1px solid red;
}
.inside
{
position:absolute;
top:0;
left:0;
}
</style>
<div class="outside">
<div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 3</p></div>
</div>
When you position something absolute inside a relative element, this relative element won't take in consideration the width or height of the absolute element, so just add a height:30px; - DEMO -
If you do not wish to have a fixed height, then use at least a min-height. - DEMO -
The problem you are having is that your outside containers have no dimension because the inside divs are absolutely positioned.
Since you say these are variable height containers, I know of no way to fix this.
What's wrong with the 'desired result' fiddle? It seems that you are trying to recreate the default behavior of how boxes are rendered.
I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/
However, the social media section is set off from the rest. It should be aligned to the right following the programming section. Any ideas?
Add a (fixed) height to your .grid_6-Container.
.grid_6 {height:250px; /*or something else*/}
Your Problem occurs on floated elements with different height.
Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Edit:
Otherwise you could add a wrapper element to clear your floats:
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I have a problem as I mentioned above.
In my web app, I'll be generating many divs dynamically by jQuery(ASP.NET MVC).
Each new div can have a different width, and all of them MUST be floated to the left
I tried (test) to float to the left 2 divs, but with no success. What am I doing wrong ?
Each div has a defined width, because when the total width of all divs > mainDIV's width, then the scrollbar will appear. Now, in that case, this 2 divs are not floated to the left
Here's the code
<div id="mainDIV" style="overflow:auto; width:100%;">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
You have to make sure that the containing div is wide enough to accommodate the floated div's side by side.
So in your example, you would have to set the width of the containing div mainDIV to at least 1920px.
You need an additional wrapper if you want the scroll-bars to appear on mainDIV:
html:
<div id="mainDIV" style="overflow:auto; width:100%;">
<div id="wrapper">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
</div>
css:
#wrapper {
width: 1920px;
}
I'd try to use CSS in a way that doesn't have to do style= for each element. Without more context and/or testing I can't guarantee it will fix your problem, but its possible it will and its better form.
Either set float:left for all div tags
div {float:left;}
put all div tags to be floated left in the same class
<div class="className" style="width:960px; background-color:Red;">
a
</div>
div.className {float:left;}
Also, make sure you do not specify any kind of absolute position as this will override the float. There appear to be some subtleties concerning float and width, so check those out too http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/
How to (top) align 3 div that should be relative to a previous div (but not between them)?
I can't use floats or position:inline-block (if you set display:none on 2 divs the last one shouldn't move).
position:absolute neither because there's a relative footer underneath.
vertical-align:top doesn't work using spans - any workaround?
I tried using a wrapper but it can't work cause the height of the divs is not fixed.
The height of the wrapper gets completely ignored anyway (by the following footer) unless Im using relative children.
Any ideas?
HTML
the order is important and the wrapper is optional (to position the side divs)
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
<div id="footer"></div>
CSS
#left {float:left}
#middle {margin:0 auto}
#right {float:right}
#footer {clear:both}
unless someone comes up with something easier
ill accept my answer in 24h