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.
Related
I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;
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.
I want to have two columns in webpage and each one with their own scrollbars instead of the common one that both uses. For example, what I'm thinking is along the lines of new twitter ui.. where one column shows the list with its scrollbar if the list is longer than the height and similarly the other column shows the details with its own scrollbar.
I am simply lost which way to proceed, do I need to use frames to achieve this. Can the global scrollbar be suppressed and each column use their own scrollbar with css?
HTML:
<html>
<body>
<div class='right'>
<!-- data -->
</div>
<div class='left'>
<!-- data -->
</div>
</body>
</html>
CSS:
body{
overflow:hidden; /* This will remove the default scroll, not really needed, safer nonetheless */
}
.right, .left{
overflow:auto; /* This will add a scroll when required */
width:50%;
float:left;
height: 100%
}
Take a look at the CSS overflow property, it allows you to turn on scrollbars for a particular element, such as a div. Make sure you set a width and height on the element as well, otherwise it'll just expand to fit your content.
I have a sidebar div to the left of my main content area and a footer below. How do I get my side bar div and main content div to both extend to my footer without filling it with content?
I think you are looking for the min-height CSS attribute. I don't know exactly how the markup is structured, but applying it to both divs (left and main), or a surrounding container should do it.
If you need it to work in older versions of IE, you should check out one of the CSS hacks like: http://www.dustindiaz.com/min-height-fast-hack/
Is this what you're looking for?
<div style="width:80%; margin:0 10% 0 10%">
<div style="background:red; width:20%; float:left">side</div>
<div style="background:blue; width:80%;float:right">main</div>
<div style="background:green; clear:both;">footer</div>
</div>
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>