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.
Related
I am trying to prevent two side by side divs I have from overlapping in responsive layout.
Here is my html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
Here is the CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
The link to this page is: http://www.rebelplanetnews.com/newsMenu3.html
As you can see, my issue is.. the text div to the right overlaps the image div to the left on page resize (smaller). I need to prevent that.
The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.
The following will work:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.
I have also floated the container to the right.
Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.
The problem is that your actual image isn't shrinking when the .image div is. So .image div will adjust according to its width percentage, but not the image contained within it. If you add a width: 100% to the img element, the image will now shrink along with the div container, and the text div won't overlap.
I have two floated div in a wrapper. They are left and right. I wanted to make the right div to appear at the top of first div(left). Right should come first and left should come at second.
Here is the code
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
CSS
#left{
float:right;
}
#right{
float:left;
width:100%;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I'm looking to have the same 100% as width for right div. Is this possible without changing markup and doing changes in CSS alone?
JSFIDDLE
EDITED
I want the right div to be in top and left should in bottom after that. When i use position absolute for the right div then left div is hidden. JSFIDDLE.
Should look like this
Use the following css :
#left{
float:right;
border: 1px solid black;
}
#right{
float:left;
position: absolute;
top: 0px;
}
#wrapper{
width:100px;
background-color: #000fff;
}
If you want place the right div before left, just remove the float:left property from #right.
Fiddle
If you want the right DIV above the left, you need to use absolute position
First of all clear the float, then set position:relative to the parent "wrapper" and position:absolute; to the right div.
Check out this fiddle
If you want to do this with just css you have to use absolute positioning. But only if you know height of each element and exact number of elements like this. Check this fiddle.
Let's assume each element has 20px height, then you can place one at top: 0px and second at top:20px. And to use remaning space like usual relative way, you must add padding equals to total height of your elements that has absolute positioning to wrapper.
Alternatively you can use JavaScript to change order in html.
I'm not too convinced by the answers so far. I would recommend avoiding 'absolute' and even javascript. Also if you want to make it friendly to all browsers you should really be specifying things such as height. It's a common misconception that a design can't be worked on every modern browser without huge hacks (i was doing it years ago for IE5.5 and firefox etc), its usually due to the CSS not being properly formed and valid. Now try the following:
#left, #right {position:relative; float:left; height:30px; color:white; width:inherit; }
#left{
background-color:blue;
margin-top:30px;
}
#right{
background-color:green;
margin-left:-100%;
margin-top:0;
}
#wrapper{
width:100px;
background-color: #000fff;
}
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.
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