So I'm trying to figure out a CSS way (also open to js/jquery solutions) to extend a div the length of the screen and not produce a horizontal scrollbar. My problem becomes that when the browser is resized and text is clipped it doesn't show a scrollbar (as it normally would) because I've set my overflow-x selector to hidden, and I can't figure out a solution.
body {
background-color: #E8E6ED;
overflow-x: hidden; /* Hides scrollbar that results from #header margin/padding */
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 62.5%; /* Makes it so 1em = 10px */
}
#wrap {
margin: 0 auto;
width: 960px;
}
/*==============
#HEADER
======================================================================*/
#header {
overflow: hidden; /* Clears floats */
margin: 0 -2000px 4em; /* This extends header the width of the viewport */
padding: 0 2000px; /* This extends header the width of the viewport */
height: 4em;
background: url(images/header.png);
border-bottom: .2em solid #6A94D4;
position: relative;
z-index: 100;
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
#nav li {
list-style: none;
float: right;
margin: .3em 0 0 0;
}
#nav a {
font-size: 1.4em; /* 14px */
letter-spacing: .1em;
text-decoration: none;
text-transform: uppercase;
color: #fff;
padding: 2em 0 .4em 0;
margin: 0 1.5em;
-webkit-transition: color 0.15s ease-in;
-moz-transition: color 0.15s ease-in;
-o-transition: color 0.15s ease-in;
-ms-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
#nav li:nth-child(1) a:hover {
color: #FF6400;
}
#nav a:hover {
color: #6A94D4;
}
body#home #nav-home a {
/*background: rgba(0,0,0,0.1)*/
color: #6A94D4;
border-bottom: .4em solid #6A94D4;
}
The large positive padding/negative margin is a great way to extend stuff the width of the viewport, but when it becomes resized no horizontal scrollbar will display.
Hi, looks like you are over engineering to me. Why not just put the #wrap to 100% or 99% rather than introducing a fixed width and then over ruling it. Also I do not understand the #header overflow hidden being used to clear floats when I cannot see any floats as having been introduced at that point. Keep it simple. Jim
Hi, looks like you are over engineering to me. Why not just put the #wrap to 100% or 99% rather than introducing a fixed width and then over ruling it. Also I do not understand the #header overflow hidden being used to clear floats when I cannot see any floats as having been introduced at that point. Keep it simple. Jim
I'm trying to have the page centered within a 960px wrap; if i change the wrap from 960px to 99%, then everything moves to the left and right of the screen and leaves the middle completely devoid.
My issue still is figuring out a good way to have full browser width bars; the way I have it accomplishes it, but at the expense of losing the horizontal scroll when re-sized.
Hi, if you add text-align:center; to the body style block your div wrap will center using either fluid or fixed width *margin:auto;* I simply do not understand the requirement for
Code:
margin: 0 -2000px 4em;padding: 0 2000px;
since all that is doing is giving a horizontal padding to any narrow element upto your fixed width value. Jim
Last edited by jamaks; 10-01-2012 at 11:04 AM..
Reason: inadvertant smilie
Hi, if you add text-align:center; to the body style block your div wrap will center using either fluid or fixed width *margin:auto;* I simply do not understand the requirement for
Code:
margin: 0 -2000px 4em;padding: 0 2000px;
since all that is doing is giving a horizontal padding to any narrow element upto your fixed width value. Jim
Text-align: center is only for text, which is a declaration is do not want at all.
Wrong. Text in text align refers to elements that may contain text. applying it affect the cont whether it is text or another element.
As for avoiding the clip, use percentages for dimensions so the browser can render based on resolution.
You're right about text-align, my mistake; however I do not want my text centered.
Could you entertain me about those websites though? I'm just generally curious about how it was done, even if it forces a scroll; especially http://secondandpark.com/, because it looks elegant.
So essentially every left/right value should be a % rather than an em? I guess my problem is when it came to certain divs, I just floated without specifying a width, and that's what messing with me.
Beauty is in the eye of the beholder; I guess. That site is not one I would considered technically worth much. It looks like it has not been touched in over a year (last blog post was Mar 2011). It has no flexibility, and is using an ancient doctype. It is just an old fashioned Wordpress template. Basically it looks like a million other sites, and I don't see that it has much to offer; and it is certainly not something you want to learn from.
Beauty is in the eye of the beholder; I guess. That site is not one I would considered technically worth much. It looks like it has not been touched in over a year (last blog post was Mar 2011). It has no flexibility, and is using an ancient doctype. It is just an old fashioned Wordpress template. Basically it looks like a million other sites, and I don't see that it has much to offer; and it is certainly not something you want to learn from.
Sure. But still no solution to my question? How to get browser width bars like that?
The large positive padding/negative margin is a great way to extend stuff the width of the viewport, but when it becomes resized no horizontal scrollbar will display.
Nope. It is not a great way.
Quote:
Originally Posted by COBOLdinosaur
Wrong. Text in text align refers to elements that may contain text. applying it affect the cont whether it is text or another element.
It centers elements that are display: inline or display: inline-block.
Quote:
Originally Posted by Vytfla
Sure. But still no solution to my question? How to get browser width bars like that?
Before you post, read our: 
