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.
Related
I am trying to keep a fixed header in place on a web page and for the main content, when scrolled, does not move over the main header.
I am failing to understand why inline CSS works as expected but when switching the same CSS properties to an external style sheet, it fails to work. The external style sheet is being found as the first <div> has its properties set correctly. I have tried using both id and class on the second div but neither seem to work. This is the code using ids rather than classes.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="height:100%; width:100%">
<div id="fixed-header">
<h1>Page Heading</h1>
</div>
<div id="main-content">
<!-- a number of articles and sections -->
</div>
</body>
</html>
css/style.css:
#fixed-header {
position:fixed;
height:100px;
top:0px;
overflow:hidden;
}
#main-content {
position:absolute;
top:100px;
left:0px;
right:0px;
overflow:auto;
}
There is no other CSS code.
If I change <div id="main-content"> to <div style="position:absolute; top:100px; bottom:100px; left:0px; right:0px; overflow:auto;"> it works.
What am I doing wrong?
This boils down to a basic understanding of CSS.
If you only specify the top of an absolutely positioned element, the rest of that element will size normally (its height will be the height of the content inside the element). When an absolutely positioned element is tall enough to go off the bottom of the screen, that creates a scroll bar in the body/html.
Putting the bottom property on your content limits the height of your content so the content container element itself can scroll individually of the body.
https://css-tricks.com/almanac/properties/p/position/
I think you are missing a big point here. This is the way a browser gives preference to the styles attached to a web page:
INLINE > ON-PAGE > EXTERNAL
So, you have to remove the inline css when you apply the external one.
And if you want to say get 100px as the result then in the external css file put height and width as 100px after height and width as 100%.
why??
it is because you fix the div with the 100px in the botton and you close the box if you want you gave to the div the width 0px left and 0px right nowyou can say to width 100% so you gaved him(the div) an width nov for the height you say stay 100px from the top of the view height and then you say stay 100px from the bottom so you "closed" the box and now your overflow can work correctly i hope that explained a little bit the why because of what
You must put the height to html tag too!
Look this jsfiddle
html, body {height:100%}
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'm making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third "login box".
However, I can't seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).
Also, margins don't seem to be affecting the newly created box either.
Here is what I want it to look like: http://i.stack.imgur.com/Kmm1g.jpg
And here is the current website: http://www.winterlb.com/
So my question is, what is the easiest way to accomplish this? Thanks.
You can put your login box and your nav box in the same div. Float this div and the main content div like so:
HTML:
<div id="navBar">
<div id="loginBox">
...
</div>
<div id="navBox">
...
</div>
</div>
<div id="mainContent">
...
</div>
CSS:
div#navBar {
float: left;
width: 200px;
}
div#mainContent {
float: left;
width: 600px;
}
Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.
Style the approriate login div and navigation div. Float them left if needed.
Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ
You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are:
<!DOCTYPE html>
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>
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.