I am trying to create header , footer and a side bar that extends throughout the content but I am having problem. I have jsfiddle. but I am unsuccessful creating sidbar that is equal and with the containt in height.
See this answer. The user suggests that you give a large bottom padding and a negative bottom padding of the same amount for the sidebar and main divs. Put a container around your sidebar and main div and hide the overflow in it.
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
Hey now define your sidebar and content bar
width in %
as like this
live demo http://jsfiddle.net/zAYru/5/
Related
How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/
I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.
It's displaying in firebug, but not appearing on the screen.
I'm currently learning CSS so any tips/advice on what I'm missing are welcome.
Any advice available will be gratefully received.
Thanks in advance,
Tom Perkins
You can view my code here:
http://jsfiddle.net/tomperkins/v3yqf/
Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:
.sidebar {
background: orange;
}
See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)
Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)
Edit:
So, use
<div class="sidebar"></div>
<div class="content"></div>
instead of
<div class="content"></div>
<div class="sidebar"></div>
I have a simple design. To the left is the navbar, to the right is the content div. I just did float left and float right and it works - unless the monitor is too wide. Then the navbar is far off to the left (like it should) but the content clings to the right. The middle is empty space. I want the content to cling next to the navbar on the left.
How can I accomplish this?
How about floating them both to the left and use percentage values to set their width..
Like below:
#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}
Or if you want to fix the size of your sidebar and have the content fills the rest of the space you can do the following(I use it all the time):
HTML:
<div id="content"><div class="in">
CONTENT HERE
</div></div>
<div id="sidebar">
SIDEBAR HERE
</div>
CSS:
#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
#content .in {margin-right:300px;
/*sidebar's width or more for space between blocks*/}
There are lots of method to do that.
It depends :
if you want a fixed width layout, or a relative one.
if you want the layout to be centered or not.
etc.
A sketch of what you want or/and your actual code would help.
Anyway, if you're not aware of CSS layout, you could use a CSS framework like blueprint which is easy to use and takes care of your current problem by itself.
I'm experimenting with DIVs to align my page's contents:
http://labs.pieterdedecker.be/test/test.htm
As you can see, there's something wrong with the sidebar. I got the sidebar DIV to be aligned to the right of the page by doing float: right, but when the text in the sidebar stops the main area takes over the width that should be used by the sidebar.
How do I fix this?
I supose what you want to accomplish is to separate the #body div in 2 columns.
First of all it will be easier if you package main column in its own div like this:
<div id="body">
<div id="sidebar">lorem ipsum...</div>
<div id="main">lorem ipsum...</div>
</div>
and then give #main div a width.
If you need to preserve your markup, then ALL #body elements other than #sidebar must have a width.
Another solution that would work if page is static and it's content will not "grow" is to set a big-enough heigth to the sidebar...
maybe what you are looking for is equal height columns... there are some differente method to do this... just google for it or take a look at this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
You give the main area a width.
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...