I'm learning CSS and am having trouble getting my #wrapper DIV to expand to fit it's contents.
I've made sure that my containers all have 100% height, min-height didn't seem to do anything but I did try that also on both the #wrapper, html and body. Is it something to do with relative vs. absolute positioning? Here's an example of what i'm working on below, any help would be greatly appreciated.
(Updated 4.21.11 by owner)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Alpha_textArea</title>
<style type="text/css">
html {
height: 100%;
clear: both;
}
body {
margin: 0px;
padding: 0px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size: 100%;
line-height: 1em;
background-color: #gray;
background-size: 100%;
height:100%;
clear: both;
}
#wrapper {
margin-right: auto;
margin-left: auto;
/*background-color: #FFF;*/
width: 75%;
height:100%;
position: relative;
clear: both;
}
.screen {
margin-right: auto;
margin-left: auto;
background-color: #3B6AA0;
width: 75%;
height:100%;
filter: alpha(opacity=20);
/* CSS3 standard*/
opacity:0.20;
z-index: -100;
position: absolute;
left: 12%;
right: 12%;
clear: both;
}
.overlay {
margin-right: auto;
margin-left: auto;
width: 75%;
height:100%;
z-index: 100;
position: absolute;
left: 12%;
right: 12%;
padding: 0px;
clear: both;
}
#textArea {
height: auto;
width: 75%;
margin-right: auto;
margin-left: auto;
color: #FFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="screen"></div>
<div class="overlay">
<div id="textArea">
<p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
<p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
</div>
</div>
</div>
</body>
</html>
For a container div, it is generally better to leave off the height property (unless you want to limit it for a specific reason). That will allow the height to expand as needed.
the 100% property means that it's going to fit on the parent's body.
check this out
http://cssbeauty.com/skillshare/discussion/30/100-width-and-height/
Your link is down, but it looks like if you add overflow:hidden; to your #wrapper, you'll get the desired effect.
Just keep in mind that absolute positioning removes the element from the natural flow of the document, so you'll need to consider how each item's content may overflow its container.
Related
I'm learning CSS and I tried to create a simple layout.
I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Edit
Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.
Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".
I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it?
body {
margin: 0;
}
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 0;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Thanks
When using percentage widths the margin, padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.
margin: 0;
padding: 0;
border: none;
Alternatively, you could use the box-sizing property which will make the calculation include padding and border. Then you would only have to account for the margins elsewhere.
box-sizing: border-box;
Here you go:
body{
margin:0px;
}
div {
border-radius: 10px;
}
#wrapper {
padding: 0%;
}
#wrap {
float: left;
position: relative;
width: 100%;
}
#header {
position:fixed;
width:inherit;
z-index:1;
padding:0px;
height:50px;
border-radius:10px;
background-color: #80B7ED;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<html>
<body>
<div id="wrapper">
<div id="wrap">
<div id="header"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
See here jsfiddle
EDIT:
If you wish to add a margin, I'd suggest you add a variable margin, for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.
Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.
What i want to do is to scroll my web page in two direction that is leftPanel in left to right direction while rightPanel in right to left direction but the header remain fixed in its postion. But i am stuck some where.
here is my code:
HTML File-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='leftPanel'></div>
<div id='rightPanel'></div>
</div>
</body>
</html>
CSS File-
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
display: inline;
overflow-y: scroll;
}
#leftPanel{
float: left;
margin-left: -200px;
display: inline;
position: relative;
width:100 %;
height: 100%;
background: red;
}
#rightPanel{
display: inline-block;
position: relative;
width:100%;
height: 100%;
background: black;
}
please look at the image for further explaination:
at the page load scroll will be at center and the two divs positioned accordingly, when i scroll up the leftPanel scrolls from left to right and when i scroll down its rightPanel move from right to left.
What should i do ??
What you are doing is quite awkward to achieve because the scrollable divs must have a known width otherwise it is really difficult to control the line-wrap to act in your favour, but if you have a fairly static design to aim for it can work quite well.
You have quite a few strange things in your code that don't seem to be doing anything useful but it could be due to me misunderstanding what you are aiming for, also, some javascript might be essential for this, at least to get the left panel to start scrolled all the way to the right.
Here is my working css for something like what you are trying to do:
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
}
#leftPanel{
float: left;
width:50%;
height: 100%;
background: red;
overflow-x: auto;
}
#rightPanel{
float: left;
color: red;
width:50%;
height: 100%;
background: black;
overflow-x: auto;
}
.horizScroll{
width: 800px;
}
#leftPanel .horizScroll{
direction: rtl;
}
And a jsfiddle
I have done some research and i had achieved it by adding a little jquery.
My code is :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
<script src="./jQuery.1.10.0.js"></script>
<script>
$(document).ready(function(){
$("#mainPanel").scrollLeft(document.body.clientWidth*0.25);
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
}
else {
}
});
});
</script>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='panelOne' class='panel'></div>
<div id='panelTwo' class='panel'></div>
</div>
</body>
</html>
CSS file
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
position: fixed;
}
#mainPanel{
top:10%;
position: relative;
width:100%;
height: 90%;
overflow-x:scroll;
display: block;
background: yellow;
}
#panelOne{
position: absolute;
display: inline;
width: 1000px;
height: 100%;
background: red;
}
#panelTwo{
position: absolute;
display: inline;
margin-left: 1000px;
width: 1000px;
height: 100%;
background: aqua;
}
and here its fiddle:
JSFiddle
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
I know that it's a newbie question, but if you could give me a hand and tell me what I'm doing wrong I'd really appreciate that:
While I was experimenting with HTML and CSS I decided to create a page with a fixed size that should be centered on the screen. To do so I decided to place the [body] tag by making its position relative and move it by writing:
position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
Hovever it didn't worked quite as expected, and this is the result I'm getting:
I was expecting to see the yellow box perfectly centered both horizontally and vertically, but instead I see that it's slightly off-center.
I tried to load the page on Safari, Firefox and Chrome and I'm getting the same results so as I already suspected I know that it's my fault :-)
Could you help me by explaining what I did wrong ?
Thank you very much
This is the complete HTML+CSS code of the page I have written:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
<style>
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
}
</style>
</head>
<body>
This is my website
</body>
</html>
That's because of the padding.
If you set the padding of the body to 0, it works (tested).
If you need a padding, add an internal 100% width div inside your body and give this internal div a padding.
Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
</head>
<body>
This is my website
</body>
</html>
CSS:
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin:auto;
margin-top: -300px;
}
JsFiddle: http://jsfiddle.net/qecwx/
The margin-left and margin-top should have -ve half values for width and height respectively:
margin-left: /* minus half of width */
margin-top: /* minus half of height */
You need to put in appropriate values.
In the container, you can also center using:
margin:0 auto;
provided you have already specified width too
Just messing around with it for a few minutes and this is what I came up with that seems to fit your needs:
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: relative;
margin: 0 auto;
margin-top: 10%;
}
All I did was remove the margin-left: and did a margin: 0 auto; to align the left and right sides. I then set the margin-top: 10%; to get the top and bottom centered. Also I set the positioning to relative. Hope that this helps.
Basically, you want to have the margins on your body tag set to auto like this
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
to center the body vertically takes a lot more work.
See attached image. How is this accomplished? Gosh, I've been going CSS for 8 years but somehow never had to do this!
Thanks!
This is how I do it:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
Example here
I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:
The HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
And here's the CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.
Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)
Good luck!
This new approach doesn't break the layout as the content box (right) organically grows. Also it allows to safely apply backgrounds and borders to the container box.
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
See demo.
You can always use table display layouts (sigh).
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}
<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
This is the most straight forward solution I could think of.
Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar.
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}