css positioning like a grid - html

So I am stuck on this seemingly easy problem:
I want my page to be made up of two sections. First is a nav-bar on the left that is always 300px. Next is the content of the page, which should fill the rest of the space to the left.
Both of these elements have position:relative
Let me explain this with code:
#navBar{
position:relative;
background-color:#666;
width:300px;
}
#content{
position:relative;
background-color:#999;
/* what can I put here to make it so, no matter
** what (even on resize), the div this represents
** will always go from the end of #navBar to the
** end of the entire window?
*/
}
I know I will probably have to use float:left somewhere in here, but I still need to get the width right before I can use float
If I wanted to use jquery, I could do:
var ww = $(window).width();
$("#content").width(ww-300);
$(window).resize(function(){
ww = $(window).width();
$("#content").width(ww-300);
});
but I was hoping this was doable in css...
any ideas?
jsfiddle

You can just use float: left for the navbar. No need for position: relative
#navBar{
float: left;
background-color:#666;
width:300px;
}
JSFiddle
If the content div might be longer than the navbar and you don't want it to flow below the navbar, you can add a margin-left
#content{
background-color:#999;
margin-left: 310px;
height: 400px;
}
JSFiddle

Here you go:
http://jsfiddle.net/GvC4k/1/
I thought you might like the menu 100% height as well.
body,html{height:100%; font-family:Arial;}
.menu{float:left; width:300px; background:#dadada; height:100%;}
.content{background:#888888;}

Related

DIV background extend behind another DIV

First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit

The text is hidden from content

I have a problem on my website where a piece of text falls underneath another div.
The problem is in the sidebar, as you can see in the following image. The text on the left side falls under the content, which is on the ride side of it.
Here is a JSFiddle example of the problem: http://jsfiddle.net/j87Gy/
I think that the problem is in the following CSS code, but i'm not sure:
.wrapper{
height:100%;
width: 100%;
}
.sidebar{
width:25%;
background:#262625;
float:left;
height:100%;
position: relative;
}
I updated your fiddle (http://jsfiddle.net/bukfixart/j87Gy/2/)
Just remove the line width:100%; in the css from the selector .footer.
The class has a padding (5%). If you are using a width, the padding will be added to it, so the sum will be
100% + 5% (left) + 5% (right) = 110%.
This will be oversized everytime.

Not centered horizontally because of position absolute

I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.

How do you implement a fixed left sidebar and fluid right content in CSS

I got headache how to make my fluid content will float to right.
left sidebar is fixed size.
right content is fluid size.
Here and example my html and css
How to make my id="content" will float on right?
Set a margin and remove the float/width on #content, like so:
HTML:
<div id="wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
CSS:
#wrapper {
width:400px;
overflow:hidden;
padding:10px;
}
#sidebar {
float:left;
width:100px;
}
#content {
margin: 0 0 0 100px;
}
div {
border:1px solid #333;
}
http://jsfiddle.net/HWMJc/1/
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.
http://jsfiddle.net/HWMJc/874/
#sidebar {
float:left;
width:100px;
}
#content {
overflow:hidden;
}
You should set it to be:
sidebar{ width:100px; float: left}
Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.

Background Images around flexible Content?

im trying to get some background images around a content div. Thing is, the content div should have a flexible width (no problem). The background pics should always be left and right attached to the content div. BUT: the horizontal scrollbar should only be triggered, when the user reduces the window to the width of the content div.
Picture: Structure
I came up with something like this:
<div>
<div class="header">/div>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="content">Content</div>
</div>
<div class="footer">/div>
</div>
.wrapper{
margin:auto;
width:950px;
position:relative;
}
.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}
.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px;
}
Scrollbars always appear when window hits the right absolute div. I need them to be two divs (left/right) because the content div should be flexible and not hide the background when it extends to much.
Someone got a tecnique for this?
you have an unnamed plain root container div.
Add this style for that div (or give a class/id name to wire css deceleration).
Main point is min-width... Keep it same with your container div's width.
also adding body,html{margin:0;padding:0;} will be nicer.
style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"
this will work fine exept for ie6.
For ie, you can apply some js magic.
Let's assume you're using jquery library and you gave id name "shell" to your root container div.
Then try this script only for ie6. (create exclusion or something like that):
$(document).ready(function(){
$('#shell').each(function(){
var that = this;
var contentWidth = 950;
check();
$(window).resize(check);
function check() {
var winWidth = Math.ceil($('body').width());
if(winWidth <= contentWidth) {
$(that).css({'width':contentWidth});
} else {
$(that).css({'width':'100%'});
}
}
});
});
This script will make "shell"s width 100%. (if browser's width is larger than 950px) otherwise it'll lock shell's width with 950px and that will enable scrollbar.
I did something similar for a website, the solution I came with was this:
I created an image with the left and right content on the background and the space of the content in the middle to just be a solid color, even though the image is 1400 x 539 it weights 12 KB, so it's pretty good.
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
body {
background: #fff url(left-and-right.jpg) no-repeat center top;
text-align: center;
}
#wrapper {
margin: auto;
text-align: left;
width: 960px;
}