Let's say I have a navbar that has 5 elements nicely floated to the left. I then add an element that I want to be on the far right, but I want a little bit of a margin between the element floated to the far right and the edge of the actual document. If I just do float:right;, the element is smashed to the end of the document. If I try to mess with position-right or margin-right, nothing happens. How do I get the element away from the edge?
A couple options, first use a wrapper to to control the two divs seperation:
HTML:
<div id="wrapper">
<div id="left">Left Div</div>
<div id="right">Right Div</div>
</div>
CSS:
#left {
float: left;
}
#right {
float: right;
}
#wrapper {
width: 500px;
margin: auto;
padding: auto;
overflow: auto;
}
http://jsfiddle.net/wDjFV/
Another option is to do float: left on BOTH <div>s and seperate with margins there:
HTML:
<div id="left">Left Div</div>
<div id="right">Right Div</div>
CSS:
#left {
float: left;
}
#right {
float: left;
margin-left: 200px;
}
http://jsfiddle.net/wDjFV/3/
Update:
Just a thought on the second option that you may not know, you'll want to to do clear:both on a CSS rule for any <div>s that are bellow the ones you are floating to get the normal stacking behavior.
padding-right may be what you are looking for, not position-right. Either way, margin-right should be working to pull the box away from the edge of the page. padding-right will keep the box on the edge of the page, but move the containing content further away from the edge.
Related
I have a container element and two sub elements in it placed in as float: left, and float: right. The left-floated element has one line of text. The right-floated element has two lines separated by . Now, when this is deployed, the container takes up on the height of the left-floated element, so the second line in the right-floated element appears outside the container. What can we do to prevent this from happening?
What all you need is to have a display: inline-block; or overflow: hidden; property in the container. Check this JSFiddle
<div id="m">
<div class="a">a<br>c</div>
<div class="b">b</div>
</div>
#m{
background-color: gray;
width: 100%;
overflow: hidden;
}
.a{
float: left;
}
.a{
float: right;
}
Use a clearfix implementation. That fix is usually attached by a class name to the parent DIV that you want to expand to contain floated child elements. For example see http://www.webtoolkit.info/css-clearfix.html
I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}
Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).
Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.
I have a two column layout, one of them is floated left, another is not:
<div id="left">
LEFT
</div>
<div id="right">
RIGHT
</div>
And the CSS is:
#left {
float: left;
width: 200px;
background: yellow;
}
#right {
margin-left: 200px;
background: orange;
}
In the right element that is not floated, I have a markup like this:
<div id="nav">
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="clear"></div>
</div>
<h1>Welcome World</h1>
And the CSS for nav and item is (as you see, the item is floated):
#nav {
background: blue;
}
.item {
background: green;
float: left;
margin-right: 10px;
}
And my clear element is:
.clear {
clear: both;
}
And, at last, I get this result:
I think that the problem is with my clear element which is clearing the floated element too (#left).
But I expected to get this result:
Here is the fiddle demo
Instead of adding unneeded mark-up in your HTML, you can just add overflow: hidden; to #nav. This will create a new block-formatting context for the list-items within #nav, as floated elements are taken out of the normal flow (its in-flow container won't respect their height, notice the <body> not extending down to #left in my fiddle)
From the Visual Formatting Model, 9.4.1:
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
#nav {
background: blue;
overflow: hidden; /* Creates a new block-formatting context
for floated descendants */
}
http://jsfiddle.net/bJFUj/9/
Working jsFiddle Demo
Make your #nav element to inline-block and set the width to 100%:
#nav {
background: blue;
display: inline-block;
width: 100%;
}
I did this a different way. You can move the clear to one of two different places (which gets you different results), but the overall problem is solved. Pick whichever one is more suitable.
(http://jsfiddle.net/bJFUj/4/ OR http://jsfiddle.net/bJFUj/6/)
In both cases I basically change nav's css (because no background would show otherwise)
#nav {
background: blue;
overflow: hidden;
}
I'd just move the clear to the element containing both div#left and div#right. Putting it inside div#right seems to be creating some interesting effects with regards to the height of div#right.
Example on jsFiddle
Removed from #nav
<div class="clear"></div>
Added style to #nav
overflow: hidden;
Clearing floats are concerned with floated elements but you have cleared the element that you have not floated either left or right i.e. #nav. So add float: left; to your #nav then only your <div class="clear"></div> will work as what you want.
demo
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
Is there something simple I'm overlooking? Or how would I do such a thing?
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.
If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work.
Years later edit
Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
You can see a very good flexbox guide here. The example you need is right here.
Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
Usually you can use flexbox instead of floats:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}
The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
See here:
http://jsfiddle.net/calvintennant/wjjeR/
Try this (make sure to use better class names):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
For container: position: relative
For middle div: position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/
I want to put two <div>s next to each other. The right <div> is about 200px; and the left <div> must fill up the rest of the screen width? How can I do this?
You can use flexbox to lay out your items:
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
This is basically just scraping the surface of flexbox. Flexbox can do pretty amazing things.
For older browser support, you can use CSS float and a width properties to solve it.
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
I don't know if this is still a current issue or not but I just encountered the same problem and used the CSS display: inline-block; tag.
Wrapping these in a div so that they can be positioned appropriately.
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
Note that the use of the inline style attribute was only used for the succinctness of this example of course these used be moved to an external CSS file.
Unfortunately, this is not a trivial thing to solve for the general case. The easiest thing would be to add a css-style property "float: right;" to your 200px div, however, this would also cause your "main"-div to actually be full width and any text in there would float around the edge of the 200px-div, which often looks weird, depending on the content (pretty much in all cases except if it's a floating image).
EDIT:
As suggested by Dom, the wrapping problem could of course be solved with a margin. Silly me.
The method suggested by #roe and #MohitNanda work, but if the right div is set as float:right;, then it must come first in the HTML source. This breaks the left-to-right read order, which could be confusing if the page is displayed with styles turned off. If that's the case, it might be better to use a wrapper div and absolute positioning:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
Demonstrated:
left
right
Edit: Hmm, interesting. The preview window shows the correctly formatted divs, but the rendered post item does not. Sorry then, you'll have to try it for yourself.
I ran into this problem today. Based on the solutions above, this worked for me:
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
Simply make the parent div span the full width and float the divs contained within.
UPDATE
If you need to place elements in a row, you can use Flex Layout. Here you have another Flex tutorial. It's a great CSS tool and even though it is not 100% compatible, each day its support is getting better. This works as simple as:
HTML
<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>
CSS
.container {
display: flex;
width: 100%;
height: 200px;
}
.contentA {
flex: 1;
}
.contentB {
flex: 3;
}
And what you get here is a container with a total size of 4 units, that share the space with its children in a relation of 1/4 and 3/4.
I have done an example in CodePen that solves your problem. I hope it helps.
http://codepen.io/timbergus/pen/aOoQLR?editors=110
VERY OLD
Maybe this is just a nonsense, but have you tried with a table? It not use directly CSS for positioning the divs, but it works fine.
You can create a 1x2 table and put your divs inside, and then formatting the table with CSS to put them as you want:
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Note
If you want to avoid using the table, as said before, you can use float: left; and float: right;and in the following element, don't forget to add a clear: left;, clear: right; or clear: both; in order to have the position cleaned.
div1 {
float: right;
}
div2 {
float: left;
}
This will work OK as long as you set clear: both for the element that separates this two column block.
I ran into the same problem and Mohits version works. If you want to keep your left-right order in the html, just try this. In my case, the left div is adjusting the size, the right div stays at width 260px.
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
The trick is to use a right padding on the main box but use that space again by placing the right box again with margin-right.
I use a mixture of float and overflow-x:hidden. Minimal code, always works.
https://jsfiddle.net/9934sc4d/4/ - PLUS you don't need to clear your float!
.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
As everyone has pointed out, you'll do this by setting a float:right; on the RHS content and a negative margin on the LHS.
However.. if you don't use a float: left; on the LHS (as Mohit does) then you'll get a stepping effect because the LHS div is still going to consume the margin'd space in layout.
However.. the LHS float will shrink-wrap the content, so you'll need to insert a defined width childnode if that's not acceptable, at which point you may as well have defined the width on the parent.
However.. as David points out you can change the read-order of the markup to avoid the LHS float requirement, but that's has readability and possibly accessibility issues.
However.. this problem can be solved with floats given some additional markup
(caveat: I don't approve of the .clearing div at that example, see here for details)
All things considered, I think most of us wish there was a non-greedy width:remaining in CSS3...
This won't be the answer for everyone, since it is not supported in IE7-, but you could use it and then use an alternate answer for IE7-. It is display: table, display: table-row and display: table-cell. Note that this is not using tables for layout, but styling divs so that things line up nicely with out all the hassle from above. Mine is an html5 app, so it works great.
This article shows an example: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
Here is what your stylesheet will look like:
.container {
display: table;
width:100%;
}
.left-column {
display: table-cell;
}
.right-column {
display: table-cell;
width: 200px;
}
To paraphrase one of my websites that does something similar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
just use a z-index and everything will sit nice. make sure to have positions marked as fixed or absolute. then nothing will move around like with a float tag.