Have a problem trying to have a header tab strip occupy the entire width of the browser. Below is the code. When the page is viewed in a browser, I see a horizaontal scroll bar for the browser, so, when you scroll over to the right, the bluish tab cuts out, revealing the white background.
How can I have this header tab expand when scrolled over too?
THanks.
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
html, body,form, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { margin-left: 10px;overflow: hidden; width: 100%; }
#left { background: yellow; float: left; width: 360px; }
#right { background: grey; margin-left: 360px; }
</style>
<title>Example</title>
</head>
<body>
<div id="tabstrip" style="height: 25px; background-color: #63a3c7; color: White;">
</div>
<form id="form1" runat="server">
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</form>
</body>
</html>
It's coming from the margin-left: 10px; on your #wrapper. Remove it and the problem goes away.
jsFiddle example
If for some reason you need that bit of margin there, put it on the form instead.
See this. I removed the wrapper width 100%.
#wrapper { margin-left: 10px;overflow: hidden; }
Hope this helps!
Related
I've got the following HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body, div, html {
margin: 0;
padding: 0;
}
body {
background: #727272;
}
#div1 {
background: #F00;
height: 50px;
}
#div2 {
background: #F0F;
height: 50px;
width: 1500px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
If I shrink the browser window down to less than 1500px (the width of div2), and then use the browser's horizontal scrollbar to scroll to the right, the width of div1 remains cut off at the width of the browser window, and does not stretch all the way across the screen like div2.
Is there any way to get div1 to always stretch across the screen, regardless of the width of div2?
Please note that in my real code, the width of div2 is always changing, so I cannot just set a fixed width for div1 via CSS.
Thank you.
Try this.
#div1 {
background: #F00;
height: 50px;
width: 100%;
}
In your css try
display: block;
put a wrapper around these two divs...
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
</div>
Then style the wrapper and divs accordingly
#div0 { display:table; }
#div1 {
display:block;
width: 100%;
background: #F00;
height: 50px; }
#div2 {
display: block;
background: #F0F;
height: 50px;
width: 1500px; }
http://jsfiddle.net/Ls7aj/
Using overflow:hidden on the body, html, #container will do the trick.
Add a width:100%; to #div1 and you're good to go.
http://jsfiddle.net/tCN8H/
Edit: Changed #Content to #container
This is a quick mock-up to create a full-size webpage, however whenever I test this, a small margin of space is present at the top of the screen.
How can I get rid of this small space at the top?
HTML
<body>
<div id="container">
<header id="header">
<div class="header_container">
<h1 class="header_logo">Blog</h1>
<nav class="menu_nav">
</nav>
</div>
</header>
</div>
</body>
CSS
body,html {
margin: 0;
height: 100%;
}
#container{
height: 100%;
width: 100%;
background-color: orange;
}
#header {
width: 100%;
height: 80px;
background-color: green;
}
.header_container{
margin-left: 50px;
margin-right: 50px;
}
This is being caused by the margin on the top of the h1.
To fix this, either give the header a property of overflow:hidden to make the header taller, or remove the margin of the h1 using margin-top:0.
JSFiddle: http://jsfiddle.net/jdwire/8QV4f/
I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
How would one attack such a layout?
Thank You.
Could not post code before - let me try again:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:
My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
Thanks again.
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
Fiddle
http://jsfiddle.net/moby7000/tWb3e/
Its not very hard to create a layout like this.
I created one for you, see that Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:
with a little change in the CSS, you can create a beautiful scrolling.
See that Fiddle
Edit:
If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
you need to add overflow:auto; to the area you want to scroll.
Have you tried
overflow-y: scroll;
in body?
I am tryingg to design and simple css template for my dashboard. Like to have top section to display the logo and the title, left section for the menu, center to display info based on the menu, right to display some info, bottom to display some contact info. I like left/center/right side of the page to be vertically and horizontally scorllable. When scrolled, I need the header to be always showing on the browser.
can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dashboard Layout</title>
<STYLE type="text/css">
#top {
height: 100px;
widht: auto;
border-bottom: 5px solid;
}
#left {
height: auto;
width: 350px;
border: 1px solid;
float: left;
overflow: scroll;
}
#content {
width: auto;
height: auto;
float: left;
overflow: scroll;
}
#right {
height: auto;
width: 350px;
float: right;
overflow: auto;
}
#bottom {
height: 50px;
width: auto;
}
</STYLE>
</head>
<body>
<div id="top">
<h3><b>Dashboard</b></h3>
</div>
<div id="middle">
<div id="left">
<h3><b>Menu</b></h3>
</div>
<div id="content">
<div id="div1" </div>
</div>
<div id="right">
<h3><b>Definitions</b></h3>
</div>
</div>
<div id="bottom">
<p>This dasboard prodides info about systems.</p>
</div>
</body>
</html>
To have a div that is always visible whether or not your scroll, use:
.visibleDiv
{
position: fixed;
}
Yes, as Karan said, you have to fix the position of your header (#top). A fixed element is positioned relative to the browser window.
#top {
position: fixed;
width: 100%
top: 0;
height: 100px;
border-bottom: 5px solid;
}
Then you would see your content div (#middle) starting to overlap with the header, so you should set aside a top margin.
#middle {
margin-top: 100px /* the same height as your header */
}
And because you are floating several divs, I suggest that you clearfix after them to adjust the height of the parent div.
There are many great tutorials for css menus and headers on the web, so Google them! :]
I know the answer to this is going to be simple, but I have a pretty simple HTML page, with 3 divs - header, map_canvas, and sidebar. I have some CSS to put all of this where it needs to go. But for some reason I am getting scrollbars in the browser window, and I don't want them there, I just want the page to fit the height and width of the window nicely. Any help is much appreciated.
My page is made up of this HTML:
<!doctype html>
<html>
<head>
<title>CSS Exercise</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body onload="initialize()">
<div class="header"></div>
<div id="map_canvas"></div>
<div class="sidebar">
<input id="lat" type="text" />
<input id="lng" type="text" />
</div>
</body>
</html>
And this CSS:
body {
height: 100%;
width: 100%;
}
html {
height: 100%;
}
.header {
width: 100%;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 8px;
}
.sidebar {
float: right;
width: 20%;
height: 100%;
text-align: center;
}
#map_canvas {
float: left;
width: 80%;
height: 100%;
}
JSFiddle link
This will hide any overflow and prevent scrollbars from being displayed.
body {
overflow: hidden;
}
Add overflow:hidden, to your body CSS declaration
An easy way to solve this is to use overflow-x: hidden; inside your body tag.