I need a sidebar and a content area. I want to have equal height for both sections. So if I want to specify a background color for the sidebar, it will follow the content area even if the sidebar's contents are not as tall as the content section and vice versa. I want to make this in pure HTML and CSS only, so no javascript tricks.
This excellent article on A List Apart builds such a layout from scratch, and also contains some interesting links to other articles on the subject, such as Faux Columns (also on ALA).
The only real way of doing this in a cross browser fashion is with tables.
As content is added to the sidebar cell below, it will force the entire row to expand which in turn will force the contentArea cell to expand as well. You can style those individually with css.
<style>
#sideBar { vertical-align:top;}
#contentArea { vertical-align:top;}
</style>
<table>
<tr>
<td id="sideBar">SideBar</td>
<td id="contentArea">content area</td>
</tr>
</table>
Basically just set the height of the sidebar to be 100% and it will follow the parent element's height. In the example below its the container element. No matter it's height, sidebar's height will be 100% and therefore always be same height as container.
<div id="wrapper">
<div id="container">
<div id="sidebar"></div>
</div>
</div>
<style>
#wrapper {}
#container {min-height:500px;} (or whatever you want for the height)
#sidebar {height:100%;}
</style>
Related
I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.
How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?
<body>
<header>
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
As you only want to use CSS, you could just set padding-top on your #wrapper div so it moves the content below the bottom of the header. Then adjust the padding-top size for each screen size in media queries.
...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.
If you are able to change the HTML, then another approach that avoids the use of JavaScript is to include two copies of the header element:
<body>
<header id="show">
This fixed content will wrap on small devices.
</header>
<header id="flow">
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
Then you can use #show { position: fixed; zIndex: 10000 } for the first element (to keep the header visible), and #flow { display: hidden } on the second element to consume the space in the page flow.
I have written some markup for a navigation bar on my webpage, now I am trying to move onto the next section, and I noticed when I was adding another section it doesn't expand the full width: image here
I added a white background to that section, and the body's background is black. Here's some markup and CSS:
HTML Sample:
<header>
<div class="container">
<!-- fun markup here -->
</div>
</header>
<section id="work">
<div class="container"></div>
</section>
CSS Sample
section#work {
padding: 100px 0;
background-color: white;
}
I believe I have left out all irrelevant information, but if I did leave out something important that you also need, please let me know.
The simple answer here is to use container-fluid.
Please check this fiddle: https://jsfiddle.net/ya6z789x/1/
As you can see the first container class (simply container) has a set width of 1170px at larger viewports, 970px at slightly smaller and so on (it reduces as you reduce viewport size).
The second example, container-fluid, is set to 100% width of its parent. Meaning if your header element doesn't have a width defined, the container-fluid class will stretch to the full width of the window.
Alternatively, if your header element had a width of say 900px (third example), placing a container-fluid directly as a child of it will make the container-fluid element have a width of 900px. Note, you may need to expand the viewport of the fiddle to see this in action.
I have a basic 2-column layout with divs using the following html code:
<div ID="main">
<!-- body content -->
</div>
<div ID="sidepanel">
<!-- side content -->
</div>
and the following css code:
#main{
width:80%;
float:left;
overflow:hidden
}
#sidepanel{
width:18%;
float:right;
overflow:hidden
}
While the columns are done nicely for the most part, I have one problem. If my main content requires more than 80% of the screen width to be properly displayed, the remaining width is then clipped off. If I remove both overflow:hidden items, then the side panel content overlaps the body content. The only way I can see everything properly in either case is to use the web browser zoom out feature or increase screen resolution.
With tables, I can simply use this setup with no CSS:
<table>
<tr>
<td>
<!-- body content -->
</td>
<td>
<!-- side content -->
</td>
</tr>
</table>
and everything works fine.
Overall, I'd like a horizontal scrollbar available instead of clipping if the content in the main body is too wide for the screen.
Anyone know how to fix this while still making it compatible with IE7 without having to resort to tables for layout?
#main{
width:80%;
float:left;
overflow: scroll;
}
Or if you want to ensure that there is only a horizontal scrollbar, as overflow alone does it for both horizontal and vertical scrolling:
overflow-x: scroll;
As far as I know, overflow-x was supported in IE7, so you should be good to go with this.
I have a div that streatches the full height of the screen. I want to put three divs in there: header, content, and footer, with the header sticking to the top and footer to the bottom and content fitting in between. The solutions I've found to do this requires me to define a height for the footer and/or header, and then giving the center div a margin equal to the that height, which I want to leave undefined (they should stretch to fit their content). Is there a way to do this without using javascript?
When browser resizes, the footer and header should stay the same, and the center should shrink.
<html>
<head>
<style>
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
background-color: green;
}
</style>
</head>
<body>
<div class="stretchedToMargin">
<div>
Header (style="top:0") Indefinite height.
expands to fit content without scrolling.
</div>
<div>
Content
Fits between header and footer, using the pixels leftover
scrolling if needed
</div>
<div>Footer (style="bottom:0") Indefinite height.
expands to fit content without scrolling.
</div>
</div>
</body>
</html>
Using a table (since it appears this is not possible with CSS only) as follows also doesn't work. The long text spills out of the whole layout, no scrollbars appear...
<div class="stretchedToMargin">
<table style="height:100%;">
<tr>
<td style="height:1px;">Header</td>
</tr>
<tr>
<td><div style="height:100%; overflow:auto;">...Long text...</div></td>
</tr>
<tr>
<td style="height:100px">Footer</td>
</tr>
</table>
</div>
The simplest way is to use display:table on the wrapper and display:table-row on the section divs however as usual the lame duck IE 7 doesn't support it so just use an actual <table>. Yes, it's not semantic but thats a small trade-off really.
How can I scale a div to 100% height and width inside of another element? In my case a sourrounding td. Since I'm a plugin I can not control the other HTML on the page. Here is my HTML:
<body style="height:100%;">
<table width="600px" height="400px" border="1">
<tr>
<td style="background-color:silver;">Cell 1</td>
<td style="background-color:silver;">
<div style="height:100%; background-color:yellow;">
<div style="min-height:100%; height:100%; background-color:red;">
Cell 2
</div>
</div>
</td>
</tr>
</table>
</body>
So, the Cell 2 div should be maximized. Is there a cross browser way to do this? Why is this so complicated?
Look at this stack overflow question as well ... after reviewing the top rated answer in that question, it looks like you have to set the height of the container to 100% and "min-height, height" of a child element to 100%.
Go to this website for more info - the HTML below is stripped-down version of the website
<div style="height:100%;">
<div style="min-height:100%; height:100%; background-color:red;">
put your content here
</div>
</div>
Using javascript / jquery you can easily get the height of the parent element and resize your div accordingly.
However, as the div is located in a table cell, the width is not fixed as the cell would expand and contract according to the contents of the other cells in the table. So there really is no correct width, the cell will adapt itself according to the contents of all cells.
By the way, your height problem would be easily solved setting it to 400px, but I guess the shown table structure is just an example (1 row, 400px height...).
Why bothing having a div within a div if its going to be 100% of the height and the width? Is there no other way of just using the containing div for your purpose?
It probably isnt working because height fails unless the containg element has some definite height applied to it.