I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
Related
I keep finding almost solutions to something that I feel should be really simple, but can't figure it out. (note - i'm at a really rudimentary stage of learning CSS right now)
I have one image to put on a page. Center horizontal/vertical. In a div container that is 80% of the window height and width. I would like the image to stretch to fill either the height or the width of that div, based on whichever is smallest.
I'm sure this is simple for most, but again, I'm just learning. Any direction on this would be wonderful.
I created an illustration in case i'm not explaining well enough:
Try this http://jsfiddle.net/David_Knowles/ddh2k/
This does most of what you want. You'll need to add some extra javascript if you really only want the image to be 80% of the available height when the screen height is reduced to less than the image intrinsic height.
<body>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #eee;
}
#container{
margin: auto;
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
img {
width:80%;
height:auto;
display:inline-block;
vertical-align:middle;
background:#fff;
}
i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress).
(The 2 sidebars work fine with float. ) So i tried width:auto on the container.
But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.
Do you know how to fix this?
#container { /* the text */
overflow:auto;
width:auto;
position:relative;
float:left;
}
#primary { /* first sidebar */
position:relative;
border:1px solid red;
float:right;
width:250px;
}
#second { /* second sidebar */
border:1px solid red;
background:white;
width:250px;
height:auto;
float:right;
margin-left:15px;
}
Thanks
EDIT :
let's say i'm using this instead of the wordpress sidebars : i still can't manage to make it work, could someone have a look with this simple code? there're 2 boxes : the green one and the red one...
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div style="position:relative; width:700px; margin:0 auto;">
<div style="width:auto; border:1px solid green;">i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float. ) So i tried width:auto on the container.
But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</div>
<div style="width:20%; float:right; border:1px solid red;">blablabla</div>
</div>
</body>
</html>
A width:auto is the default value so it won't be doing anything other than what a DIV would do as standard, which is to fill the available width since it's a block level element. This changes when you float it and it will wrap its content so could be any width up to the maximum width.
I think the trouble you're running in to is mixing percentage widths and fixed widths. I can see what you're trying to do - have a fixed width sidebar (or two) and the rest of the page flexible. It was really easy to do this back in the table-based layout days but let's not go there!
Sounds like you want a fluid layout but with 2 fixed with columns. Might be worth having a read of this article to see if anything suits what you're trying to do: http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Use display:table on parent div. Then display:table-cell on the children. They will align the way they would in a table.
#container { /* the text */
overflow:auto;
width:auto;
position:relative;
// float:left;
display: table-cell;
vertical-align:top;
}
#primary { /* first sidebar */
position:relative;
border:1px solid red;
// float:right;
width:250px;
vertical-align:top;
}
#second { /* second sidebar */
border:1px solid red;
background:white;
width:250px;
height:auto;
// float:right;
margin-left:15px;
display: table-cell;
vertical-align:top;
}
Ok, i found it out : put the text at the end, use overflow:hidden and auto, and float right on the small container on the right, thanks for your answers.
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
I have a Footer that spans the width of the page. Within the footer there is an which is essentially acting as a footer background image that fills the entire width of the footer / page. However, in IE, there is some white space under the footer, when it should just be flush with the bottom of the page. Seems fine in Firefox, Safari, etc. Here's what I have, any recommendations on something to try?
<body>
<div id='container'>
<div id='content'></div
</div>
<div id='footer'></div>
</body>
CSS Is:
html {
font:62.5% 'Helvetica Neue';
color:#777676;
margin:0;
padding:0;
}
body {
font-size:1.8em; /* 18 px */
line-height:1.2em;
margin:0;
padding:0;
width:100%;
}
#container {
width:906px;
margin:0 auto;
height:100%;
position:relative;
z-index:10;
}
#content {
padding-top:20px;
}
div#footer {
position:relative;
bottom:0;
clear:both;
width:100%;
z-index:1;
}
div#footer img {
width:100%;
border:0 none;
}
Add display:block; on the image, that should fix it...
(and use code highlighting in your question if you want <tags> to be visible in your text...)
That could be a very involved answer. I have ran into this before and I forget now how I solved it. First, I should ask which version of IE your testing in, it could be old. I don't think this is as much of an issue in IE 8 and above. Next, is your DOCTYPE set. Then try setting the height and/or line-height on the footer. Make sure all sibling and parent elements have their "position", "top", and "left" set.
Have you tried positioning it "absolute" and if that doesn't work remove all other elements in the body, adding them back in one at a time till it breaks and then figure out what is wrong with the element you added.
ive been making pages using tables forever. recently ive been trying to switch to divs since everyone seems to have done that, and its been a pain. anyway i was thinking if anyone could be nice enough to help me figure this one out. i have attached a picture that will explain the problem because after all a picture's worth a thousand words. thanks in advance.
[image removed]
do you mean something like this?
html:
<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
#content{
width:800px;
border:1px solid red;
min-height:100%;
margin:0 auto;
position:relative;
}
#navigation{
position:absolute;
top:0;
width:100%;
height:100px;
background:gray;
}
#navigation div{
width:800px;
height:100%;
background:lightgray;
position:relative;
margin:0 auto;
}
demo:
http://jsfiddle.net/Z8UDf/
To center a div use CSS margins:
<div style="width: 800px; margin: 0 auto"></div>
Inside that div you can then place your navigation bar which will fill up the space available to it.
With regards to the spaces either side of the main content you have two options.
You can set a background-image on the body at top repeat-x so that it appears that you have a horizontal bar right the way across your page.
You can split the navigation from the main body, have both centered using the method above. Wrap the top 'navigation' div with another div that will be 100% width. You can then style that div as you wish. This has the advantage that you can move it without updating your background images.
use css style
<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>