I am currently trying to pick up css. It's going okay so far, however I am having an issue I haven't had a problem with until now.
I have a <div> containing two further <div>'s.
I expect the "parent" <div> to act as a parent (automatic height, etc.) and actually "contain" the two child <div>'s.
My code:
<div class="formpair">
<div class="formlabel formitem">
Parent Section:
</div>
<div class="formcontrol formitem">
<select>
</select>
</div>
</div>
My CSS:
.formitem {
position: relative;
float: left;
}
.formlabel {
width: 200px;
}
.formcontrol {
position: absolute;
left: 200px;
}
.formpair {
clear: both;
margin-bottom: 4px;
height: auto;
position: relative;
display: block;
}
I have tried experimenting with "position" and "display" but to no avail...
any help appreciated!
Unless there is a specific need to have the child elements floated, I have provided a different solution using display:inline-block. I have also cleaned up your CSS to remove some unnecessary bloat that may cause hierarchy problems later in your document.
You can see a working example of the fix here: JSFiddle
Here is the css that works properly to display as you need it to:
.formitem {
display:inline-block;
}
.formlabel {
width: 200px;
}
.formpair {
margin-bottom: 4px;
}
Here are a few of the problems you had with your previous CSS:
.formcontrol {
position: absolute;
left: 200px;
}
This piece of CSS was being countered by:
.formitem {
position: relative;
float: left;
}
And so .formcontrol was not having any effect on your document because of the countering CSS. The reason it was countered out is because CSS is linear and reads your document from start to finish. In your HTML you first told the CSS to apply .formcontrol and then immediately after you gave it the second class .formitem:
<div class="formcontrol formitem">
Other CSS declarations like:
height: auto;
position: relative;
display: block;
Did not seem to be needed in your example, as the default settings will work perfectly fine for this application, and imposed possible restricting declarations on your elements that could cause problems down the line with future CSS modifications.
If your intention was to use float:left, then #rdubya commented with this link on how to properly clearfix underneath floated elements: clearfix
A parent container does not expand to the height of the floated child elements.
The simplest way to do this way is to add a clearing div to clear the floating divs and get the parent to expand.
HTML
<div class="formpair">
<div class="formlabel formitem">
Parent Section:
</div>
<div class="formcontrol formitem">
<select>
</select>
</div>
<div class="clear"></div>
</div>
CSS add...
.clear {
clear: both;
}
http://codepen.io/anon/pen/ByzJbY
A modern trend to clear floats is to use pseudo elements on the container div:
in this way you reduce the markup an obtain the clearfix-result
.container:after {
content:'';
display:table;
clear: both;
}
Moreover optimizing such technique you get to Nicolas Gallagher's micro-clearfix-hack
in this version you'll also find a :before pseudo element to avoid top-margins from collapsing.
This is the mainstream most popular solution!!
I'm trying to have a toolbar always aligned to the right within a DIV without adding any height. The problem I'm finding is making this work both when the box has 100% width and when the width is determined by content. The HTML looks something similar to this:
<div class="box">
<div class="title">
float right
</div>
<div class="toolbar">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
I managed to make it work in Firefox, but Chrome wraps the toolbar when there is not enough space for it instead of increasing the width of the container.
.box {
border: 1px solid #ccc;
display: inline-block;
margin: 5px 0 15px;
}
.title {
display: inline-block;
}
.toolbar {
background: #eee;
float: right;
margin-left: 25px;
}
I would like to find a single set of rules to achieve this regardless the width of the container, but I'm out of ideas unless I use some extra class to differentiate both cases. Also, I'm trying to avoid using overflow or clearfix because I don't want the toolbar to affect the height of the box.
In this fiddle I show all combinations I have tried: http://jsfiddle.net/omegak/c4y4t/2/
You can try this, This worked for me.
.title {
float:left;
}
See if this is the desired output
Updated the below css and added clearfix class to the parent div
.title {
float:left;
}
Add the following CSS and clear the floats on first Div.
.title {
float:left;
}
Here is the demo
I got it working in the end with a little hack.
I gave up on trying the title not to be float: left. Then, to prevent the box to have no height I added overflow: hidden to it. Finally, the hack consists on setting margin-bottom: -999px on the toolbar to prevent it from adding any extra height to the box.
Here is the solution: http://jsfiddle.net/c4y4t/8/
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
I have a div that I would like to have a bottom border.
This can be see at http://jsfiddle.net/R5YN2/
What causes the border to not be placed right at the bottom?
Your container element isn't accounting for the floated elements and is basically collapsing.
Give it the property overflow: auto and it should work:
#recurring-header-wrapper {
display: block;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
overflow: auto;
}
Demo: http://jsfiddle.net/R5YN2/14/
Also, go easy on the class names. You can have selectors that target classes inside of elements:
#recurring-header-wrapper .label
Which matches only .label elements inside of the recurring-header-wrapper element. No need for huge class names.
If you float things you have to clear as well.
Read this: http://www.positioniseverything.net/easyclearing.html
This is what you're looking for. Add the class .clearfix to your wrapper-div (#recurring-header-wrapper).
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
It is displayed at the bottom (it ends there, the text is overflowing. Check that with overflow:hidden and most of the text disappear). Add a height to the div to make it the size you want.
Short answer: the float:left.
To correct that you can add overflow: auto to #recurring-header-wrapper
the floated divs inside cause this. you can clear them.
http://jsfiddle.net/R5YN2/9/
Here's the quick fix. Basically when you float left the header groups get taken out of the flow unless you clear them with something (an empty div is fine)
<div id="recurring-header-wrapper">
<div class="recurring-header-group">
<div class="recurring-header-label">Label</div>
<div class="recurring-header-item">Item</div>
</div>
<div class="recurring-header-group">
<div class="recurring-header-label">Label</div>
<div class="recurring-header-item">Item</div>
</div>
<div style="clear:both"></div>
</div>
set overflow: hidden on your recurring header wrapper http://jsfiddle.net/R5YN2/16/
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.