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.
Related
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.
How can I get two divs aligned in the same "row" on a website?
I have been working on this page, and I have tried to get a menu that floats to the left side of the website and then the content to the side of that.
I have tried using this as the div's CSS:
.menu
{
width:25%;
height:auto;
margin-bottom:2px;
float:right;
position:fixed;
}
.content
{
width:70%;
height:50%;
margin-bottom:2px;
padding: 25px;
float:right;
}
The page is not displaying them side-by-side and floating, but instead how most website such as: http://www.exorithm.com/, where they have a sidebar and an area for content.
Can anyone help?
All my code: http://pastebin.com/KqYkrweE
I think the problem is that you have position:fixed on the menu. If you use position fixed or absolute, it removes the element from the document flow, so float:right becomes irrelevant.
Edit: Here is a better example of achieving the same result
Also bear in mind that you are using percentages for width and then applying a pixel based padding. This could lead to the elements becoming too wide for the page and displaying one below the other.
70% + 25% = 95% with 5% left over.
If the 5% is less than 50px (making the whole width 1000px) then your columns will total greater than the entire width. A better approach would either be to use percentage based padding (not 100% sure how well this works) or to apply your padding, margins and borders to elements inside the floated columns, like so:
// CSS
.leftCol {
float:left;
width:25%;
}
.rightCol {
float:left;
width:75%;
}
.content {
padding:25px;
}
// Markup
<div class="leftCol">
<div class="menu">
Here is my menu
</div>
</div>
<div class="rightCol">
<div class="content">
Here is my content
</div>
</div>
Edit 2:
If you want your menu to stay on screen as the user scrolls down, then position:fixed will do the job. I looked at your page and it looks like you have a fixed width navigation of 206px. Therefore your styles for the existing markup would be better off as something like:
// CSS
.menu {
position:fixed;
left:0;
top:0;
width:206px;
}
.content {
padding: 25px 25px 25px 231px;
}
You are floating right instead of left.
Your .content has a padding of 25px on each side, which means 50px overall. Since your menu is 25% and the content 70%, if your container is smaller than 1000px you run out of space.
The following html and css shows two divs inside a container. The left div isn't floated; the right div is floated right.
The right div seems to be one pixel too narrow, and the red background color of the container is therefore showing through in that one pixel gap.
This is a simplification of my problem. http://jsfiddle.net/XPd9J/
HTML
<div class="inner-wrapper">
<div class="right-sidebar">
</div>
<div class="content">
<br /><br />
</div>
</div>
CSS
.inner-wrapper {
position:relative;
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
position:relative;
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
position :relative;
width:60%;
background-color:silver;
margin:0;
padding:0;
}
It's not the float that makes the problem. It's the percentage width. In FF and IE it works perfect, but Chrome calculates percentage width so, that not always the pixels sum up to the full 100%. Just try to slighty change the window width and you will notice the extra 1 px to disappear/appear sometimes.
How to avoid this behavior? You need to have use the same percentage somehow, so it is calculated just exactely the same. The right sidebar is 40% wide, so you need to have a right margin of 40% for the content div (these 40% are 40% of the containing block element)
http://jsfiddle.net/XPd9J/1/
.inner-wrapper {
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
background-color:silver;
margin:0 40% 0 0;
padding:0;
}
Another easy option to get the full 100% is to set the parent element to overflow:hidden and your element to width:101%.
I also encountered that issue and I use two option the display:inline-table and display:table-cell in the parent div of the floated elements..although it is not a table, I use that as an alternative
For anyone coming to this in the future, it's possible to create left sidebar / content / right sidebar with liquid floats using the above method. It might be done like this:
Container div
right-sidebar width:30%;float:right;margin:0;padding:0;
content width:40%;float:right;margin:0;padding:0;
left-sidebar margin-right:70%;margin:0;padding:0;
End container div
Provided all the containers have margin:0;padding:0; then this works in FF, IE, Chrome, Safari and Opera (latest) without a problem. Genius. The dodgy browsers should have had this problem solved a long time ago - one can only guess that web designers don't often need pixel perfect placement of sidebars otherwise there would have been huge pressure on the browser builders.
You got two non-breaking spaces there. character causes the 1px extra space on the left of the right sidebar. Btw, position: relative is redundant in this context (it's only useful when you have to fix something in IE6).
Set "inner-wrapper" to overflow hidden (just in case). Then on the right div use calc(40% + 1px) to fix the issue.
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
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>