HTML/CSS: 3 columns, variable sides and fixed centered middle column - html

My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!

A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)

Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.

This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers

OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/

Related

CSS and DIV with header and body with scrollable content, and fixed sidebar to right

I've been looking around all over, but I can't solve this, so I'm turning here.
I want to make a layout that looks like this:
The layout consists of three fields:
A header at the top with a fixed height, dynamic width, and vertically scrollable content.
Body below header, with dynamic width and height, with vertically scrollable content.
A sidebar to the right, with a fixed width, dynamic height, and no scroll. (This should remain fixed when you scroll the body content)
Dynamic height and/or width means it will resize with the window, not that it resizes with content.
If anything is unclear or there's any questions, I'll do my best to answer.
edit: one of my (very failed) attempts here: http://jsfiddle.net/uYTht/34/
html structure:
<body>
<div id="header">
header content
</div>
<div id="content">
body content
</div>
<div id="sidebar">
sidebar content
</div>
</body>
css code:
#header {
width: 100%;
height: 100px;
margin-right: 150px;
background-color: green;
overflow-y: scroll;
}
#content {
background-color: blue;
height: 100%;
overflow-y: scroll;
}
#sidebar {
position: absolute;
top: 0;
left: 100%;
margin-left: -150px;
width: 150px;
height: 100%;
float: right;
background-color: red;
overflow: hidden;
}
edit: David below helped me find the way. Basically what I had to use to make it work as I wanted was the calc()-function.
edit edit: Jack below came up with a solution that didn't use calc(), which I must say I prefer. Thank you all very much for the help!
I created a simple fiddle, that doesn't use calc (support isn't great - http://caniuse.com/calc, and then there's the big unknown of any performance penalty you may/may not hit using it..)
It's very straight forward, using simple CSS.
http://jsfiddle.net/ruYGH/3/
You can do this by using defined heights and widths for each of the elements with the overflow property.
To make a box scrollable (if the content doesn't fit inside):
overflow:auto;
To make a box not scrollable:
overflow:hidden;
Note that if the height and width are undefined, the element will grow to fit all of the contents.
I made a (not very pretty, but functional) example here:
JSFiddle
Edit:
You can make the sidebar a fixed width and adjust the other elements accordingly with calc:
.sidebar{
width: 200px;
}
.left{
width: calc(100% - 200px);
}
The JSFiddle has been updated to reflect this.
Style the divs with "overflow" to put the scroll bars where you want them and prevent them where you don't want them. You will also use overflow to specify what you want to happen to your content if it should happen to be too big to fit in your fixed width areas.
Chris Coyer is always a knowledgeable CSS resource
As far as the layout goes, it is a walk in the park if you use a two column table with rowspan="2" on the second column of the first row and only one column in the second row.
If you don't want to use tables (there is no good reason not to, but there are thousands of people that will look down on you if you do) then look at using divs with style="display: table...."
Once again Chris Coyer has an explanation
Thanks for the fiddle, your overflow css is working it is just that your header and content divs are 100% wide (full screen) and the scroll bars are conceptually under the sidebar. I need to sell you on using that table layout so that you can "dynamically" fix your dimensions so that the browser can know when to scroll instead of expanding the content down indefinitely to fit the size of the content instead of overflowing with the scroll bar.

CSS3 columns: how to get proper horz padding with overflow-x?

So, I'm playing with CSS3 columns and trying to lay out content in a bunch of horizontal columns where, if the content is long enough, it creates a horizontally scrolling page. However, I don't want the content to butt right up against the left/right edges of the viewport but I do want the scrollbar to touch the left/right edges. I thought I could do this with padding, and initially it looked like it was working perfectly, until I scrolled all the way to the end of the content.
The code is pretty simple. HTML:
<section id="content">
<p>Lorem ipsum...</p>
<p>And a bunch more paragraphs to overflow the viewport...</p>
</section>
And the CSS:
#content {
height: 400px;
padding: 10px 50px;
column-count: 2;
column-gap: 50px;
-webkit-column-count: 2;
-webkit-column-gap: 50px;
overflow-x: scroll;
overflow-y: hidden;
}
#content p {
/* just to make it easier to see the boundaries */
background-color: rgba(255,0,0,0.1);
}
​
I also set up a fiddle here: http://jsfiddle.net/uu9Tv/.
I've tried a bunch of things, but nothing seems to give the desired effect... margins on #content cause the scrollbars to not reach the sides of the viewport.
I also tried it a different way and basically let a wrapper div handle the overflow/scrolling and putting horizontal margins on the #content element, but it didn't seem to help at all. See here: http://jsfiddle.net/vQLCz/.
Anyone able to shed any light on how to get some space on the far right of the columned content in a horizontally scrolling layout?
Your approach makes sense, but padding section#content doesn't apply to the overflowed content. Having columns makes this harder to see, so first look at my example section#no-columns in http://jsfiddle.net/ansonhoyt/wGKFa/. The section contains a paragraph with nowrap. Notice how the padding constrains the background color, but not the overflowing text.
When you add columns into the mix, the padding still doesn't apply to the overflowed paragraphs. A good alternative would be to put a margin on the <p>. This solution is limited. Since margin provides both the right "padding" and the "gap", they both have to be 50px.
Ah, the limits of CSS. CSS3 columns are nice, but limited....we can hope CSS4 will add some more elegant additions like p:last-column { margin-right: 50px; }.

Div within a Div

I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Simple html/css layout? (two column)

I'm having a very hard time trying to come up with html/css for a layout to suite the following:
Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.
I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?
There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
See this jsfiddle for a working sample.
This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail
Works in IE7 and newer, Safari/Chrome/Opera/Firefox...
The best way to do this is by using the already considered safe to use box-sizing property.
Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r
It works as you want it to. Fixed width for the menu, percentage based width for the content area.
Then...
...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:
http://tinkerbin.com/3ETH28Oq

Can I center a fixed-height DIV vertically in the viewport with CSS?

We have a login page that is designed to have a 200px-high DIV vertically centered in the middle of the page. That is, it creates a 200 pixel blue band left edge to right edge (with form elements in it) that ideally should remain vertically centered in the viewport no matter how the browser window is resized.
This must be a CSS solution.
So let's say here's some sample markup:
<body>
<div id="mainDiv">
<div id="centerDiv" style="height:200px;background-color:blue;color:white">
Center this baby vertically in the #mainDiv, please!
</div>
</div>
</body>
Assume that my CSS dictates that the #mainDiv is stretched to cover the viewport top and bottom, which is easy enough to do. Are there CSS rules that I can apply to any of the elements or the page that will reliably and cross-browser (incl. IE6) vertically center #centerDiv? In a perfect world we should just be able to say
#centerDiv {
margin: auto 0;
}
And even in an OK world we should be able to address this issue with a few styles. But to quote Ving Rhames' character from Pulp Fiction, We're pretty %&#!ing far from OK.
I've looked at the solutions offered in Related Questions and scoured the Web. Nothing I can find really works 100%. Maybe this is unsolvable, but I thought I'd give the collective brains here the problem and see if I can get lucky. Thanks in advance.
If you have a fixed height, you can do it. Give the child div a top of 50% and a margin-top of -100px (or vice-versa) and you should be set.
if height unknown:
http://jsfiddle.net/Limitlessisa/a7xw6b2c/
.centerdiv{
background:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
For true automatic positioning in the center, the inner DIV would need to know the boundaries of the containing DIV. If your container does not have hard boundaries, there is no way for the inner DIV to calculate its own position automatically. It simply has no frame of reference.
The closest I think you can make it with a simple CSS solution is this:
#mainDiv
{
border: 1px dashed #000000;
}
#centerDiv
{
margin: 33% auto;
height: 200px;
}