I made a simple two-column fluid layout using Bootstrap 2. One column contains two div, and the other contains three div. Both columns are of span6. The fiddle is here.
I attempted to adjust the heights of the two divs in the left column using CSS, so that the top one occupies 62.5% of the browser window height, while the bottom one occupies the rest 37.5%. And similarly for the three divs in the right column. But there are a few questions/problems:
The heights of the blocks/divs do not fill up the window vertically, and the height of each block/div is not changed.
How to make the total height of the two divs on the left equal to that of the three divs on the right, while respecting the relative height ratio within each column (left: 62.5%, 37.5%; right: 35%, 30%, 35%)
How to adjust the paddings between blocks/divs?
I hope all of these can be achieved without any Javascript.
I've tried something, I hope that helps you. So, answers are:
Height of each BlocX div is not changed because you didn't set height of body. In tour case, body have auto height, given by elements inside of body.
Look below.
Those "paddings" are actually margins in class .well. So, avoid that class or override settings.
Finally, we have code like this:
HTML:
Removed class .well, everything else is the same.
CSS:
html{height:100%;}
.body-background {
padding-top: 10px;
background-color: #D1D1D1;
height:100%;
}
.container-fluid, .row-fluid, .span6
{
height:100%;
}
#A-b {
min-height: 62.5%;
height: 62.5%;
background-color: #FFE0C2;
}
#B-b {
min-height: 37.5%;
height: 37.5%;
background-color: #4D4D4D;
}
#C-b {
min-height: 35%;
height: 35%;
background-color: #969696;
}
#D-b {
min-height: 30%;
height: 30%;
background-color: #57BCFF;
}
#E-b {
min-height: 35%;
height: 35%;
background-color: #183547;
}
We give to html and body elements height:100%; and after that do the same to .container-fluid, .row-fluid and .span6. Now we have result like this in DEMO.
NOTE: In resolutions smaller than 768px, use media queries to set height of BlockX and all other elements. Also, don't set height directly on span6, row-fluid etc. This is just example. In live site, use some classes to override classes in bootstrap.
Related
I like to think I'm pretty good with CSS, but this issue is driving me crazy.
I'm trying to get 3 columns to be 100% height. The first two columns are floated left, the third is not floated, just margined over. There is a wrapper around all 3 columns that clears the floats. The HTML/BODY tag have 100% height on them. As far as I know, if all parent containers have 100% height, it should work. The wrapper should be as tall as the tallest content block (third column), so the first two columns should be that tall too, using 100% height.
Problem is, the wrapper, and thus the body tag, have a height equal to that of the browser window. For some reason it won't read the middle columns content height. There is probably a super stupid simple explanation for this and I'm just missing it.
Don't want an overflow hack. Cannot do faux columns. I don't see why this can't work using the CSS spec for height.
If I put a pixel amount on the wrapper div, like a 2000px height, the first two columns fill the height just like I want them to. Why isn't this working??
HTML:
<body>
<div class="wrapper clearfix">
<section class="sidebar-news clearfix"></section>
<section class="black-bar-vertical"></section>
<section class="section-main-content event-detail"></section>
</div>
</body>
CSS:
html {
height: 100%;
}
body {
background-color: #333;
height: 100%;
* {
box-sizing: border-box;
}
}
.wrapper {
height: 100%;
position: relative;
margin: 0 auto;
}
.sidebar-news {
float: left;
width: 300px;
height: 100%;
min-height: 100%;
background-color: #site-color-yellow;
margin-right: -25px;
padding: 76px 40px 20px 20px;
}
.black-bar-vertical {
position: relative;
float: left;
width: 116px;
background: url("#{img-path}/black-bar-vertical.png") repeat-y top center;
min-height: 100%;
height: 100%;
text-align: center;
margin-right: -25px;
padding-top: 81px;
z-index: 50;
}
.section-main-content {
width: 580px;
background-color: #FFF;
padding-top: 55px;
padding-left: 10px;
margin-left: 360px;
}
SCREENSHOTS:
Top & Bottom of page
The height of the two columns in dev tools
EDIT:
Found this article, which is basically the same problem.
html body is smaller than its contents
If I change the height property to min-height on the body, the wrapper becomes the full height of the content, yay! But then the 100% heights on the first two columns don't work at all.
Like I originally thought... if 100% height is set on an element, it bubbles up the dom, and inherits the height of it's parent container. If that parent container has 100% height, it inherits the height of the parent's parent, etc. That works as expected. But when it hits the body tag, with 100% height, it's reading that as 100% height of the browser window. That's the default behavior, which doesn't make sense to me. If you take off the height on the body, it encompasses all content, but then the wrapper div looks up to the body for it's height definition and get's nothing because there is no height set on the body.
It's seeming like this specific scenario isn't really possible without using flexbox, table layout, javascript, or absolutely positioned elements.
Flexbox fo-sho!
.wrapper {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: stretch;
}
.sidebar-news {
min-height: 100vh;
flex-grow: 1;
}
.black-bar-vertical {
min-height: 100vh;
flex-grow: 1;
}
.section-main-content {
min-height: 100vh;
flex-grow: 1;
}
Check this out for ref- Flexbox CSS Tricks
I've decided to do a combination of faux columns to get the first and third columns background colors, and then an absolute positioned second column that I can stretch full height using top: 0, bottom: 0.
If anyone can still solve this problem, I'd love to hear how it's done!
I'm trying to recreate the navigation bar on the Forbes website:
link here
The buttons in the navigation bar resize themselves to always cover 100% of the window width.
The way I've tried this is by setting a min and max width for my header tag and a min and max width for each button on my bar:
header {
min-width: 800px;
max-width: 100%;
background-color: gray;
}
header #Title {
min-width: 200px;
max-width: 200px;
background-color: blue;
}
header #ButtonA {
min-width: 120px;
max-width: 200px;
background-color: blue;
}
header #ButtonB {
min-width: 120px;
max-width: 200px;
background-color: blue;
}
The header is resizing fine between the min and max widths. However the width of my buttons is not changing at all. They are fixed width no matter how large my current window is.
By setting min- and max-widths, you are only setting limits to what widths the buttons can't exceed. Try making the button elements block-level ("display: block;") so that they naturally would span 100% of their parent container, but don't because of your min- and max-width limits.
Alternatively (and my preferred option), instead of setting min- and max-widths, set the width of each element to be percentages. For example (change the widths for your design):
header #Title {
width: 40%;
}
header #ButtonA,
header #ButtonB {
width: 30%;
}
Percentage widths are based on the width of the parent container. In this case, you want the buttons to be a percentage of your full width header, so the solution is to set your buttons' width percentage as a percentage of the full width. For example, if you have 5 buttons, then the width of each would be 20% (1/5th of 100%).
Here is a CodePen with an example of this: http://www.codepen.io/kyleatfine/pen/okxcz
You might also consider using a Flexbox layout to accomplish this as well. http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/
I actually don't know how to name my question. But I will explain what I need to do.
HTML is simple as this:
<div id="left_div"></div>
<div id="right_div"></div>
I need left_div to be on the left, to have 100% width, but with fixed right margin 320px. right_div has fixed width 300px and must be alongside left_div.
I know I can do this very easily, when I would do this:
<div id="right_div" style="float:right;width:300px"></div>
<div id="left_div" style="margin-right:320px;"></div>
But the problem is that I need HTML to be as I mentioned before. The order of DIVs matter. If someone wonders why, it's because I am working on responsive website, where I need, when the viewport is too narrow, the right_div to be below left_div. And that I can't do with simple solution I have put above.
I hope my question makes sense and I am thankful for any answers or helpful hints.
Oh, and I forgot to mention I need this to be pure HTML+CSS, no JS. And I don't need to support IE7 and below.
UPDATE:
left_div must be width:auto and right margin must be fixed (e.g. 300px).
If you want your layout to be responsive you should use a CSS framework like Columnal, 1140, or more in this list.
Most of these frameworks supports the grid system, which is the best way to structure your layout and you don't have to worry about floats and pixels anymore.
I think that what do you want is almost impossible with just pure HTML + CSS.
What may work for you is something like this one I did: http://jsfiddle.net/fmZAm/
HTML:
<div class="main">
<div class="left"></div>
<div class="right">
<div class="fixed_content"></div>
</div>
</div>
CSS:
div.main
{
min-height: 500px; /* force some height */
min-width: 300px; /* min width to show content */
text-align: center; /* center content when in vertical responsive mode */
font-size: 0px; /* remove blank space from 'inline-block' display */
}
div.main > div /* left and right divs */
{
width: 100%; /* force both to have as max width as possible */
min-height: inherit; /* same min height as parent */
min-width: inherit; /* same min width as parent to show content */
display: inline-block;
}
div.left
{
max-width: 58%; /* 100% width from max of 58% parent width */
background-color: lightgreen;
}
div.right
{
max-width: 42%; /* 100% width from max of 42% parent width */
text-align: right; /* put child 'inline-block' divs to the right */
background-color: dodgerblue;
}
div.right > div.fixed_content
{
width: 300px; /* set the 300px right div you want */
min-height: inherit; /* same min height as parent */
background: orange;
display: inline-block;
}
As both divs (left and right) will have % widths, both will resize based on the current max width, but you'll have your fixed width div inside of the right div. So, when your right div resize to 300px width (the fixed with of its child div) it will go below the left div.
Hope it helps!
I had the same issue, I solved it using position:absolute.
HTML
<div class="container">
<div id="left_div"></div>
<div id="right_div"></div>
</div>
CSS
.container {
position:relative;
}
#left_div {
float: left;
width: auto;
margin-right: 320px;
}
#right_div {
position:absolute;
top:0;
right:0;
width: 300px;
}
I have next html:
<div class="left">
<div style="margin: 32px 0;">
<div class="border"></div>
</div>
</div>
and css:
.left {
position:absolute;
background: red;
height: 50%;
width: 32px;
}
.border {
background: green;
height: 100%;
}
but I don't see green box :(
UPD: I want to see red squares over and under green box.
UPD2: height of green box should be red.height - 32px*2
Your problem is that you have 3 empty div's here and not one of them has a set height. So even if you do min-height: 100% its not going to work unless some outer container has a height that your not showing. You will need to put some content in there or give one of the 3 div's (assuming they are the only containers on the page) an actual height. Like .left{ height: #px; } (# = the height you want it to have). Otherwise the browser does not know how to render percentages because it has nothing to relate them too.
Div's are block level elements which means they will assume the size of content put in them but if there is no content in them they will assume a height of 0px by 0px.
http://jsfiddle.net/X6qkL/5/ updated
The second div is not assigned a height, so the innermost div cannot be assigned a relative height. Try adding the following CSS rule:
.left div {
height: 100%;
}
Or, assign explicit heights to the inner divs.
http://jsfiddle.net/B9z92/1/
Use min-height: 100%; in .border{...}. and add a class
.middle {
height: 100%;
} and assign it to the parent div of .border{...} div.