I'm struggling with a sidebar height.
My container is now showing the correct height (that of the content inside), but my sidebar that should be using 100% of that height is still not appearing.
I've implemented one of the suggestions below (http://www.quirksmode.org/css/clearing.html) but the sidebar's still not appearing.
I'm sure this is a simple one for you pros, any tips appreciated!
Thanks,
Tom
Here's my code: http://jsfiddle.net/tomperkins/wy52B/
Check out this way of clearing floats, it's a lot cleaner and easier to use.
Don't use clearfix
It's not necessary in most situations, and it's definitely not semantic.
The simple solution for most cases: float the parent.
HTML:
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
</div>
CSS:
.parent
{
float: left;
width: 100%; /*or whatever you want it to be*/
}
.child
{
float: left;
width: 50%;
}
Related
my problem sounds like easy but i doesn't found a solution.
I use Bootstrap Grid System and have the following code:
<div class="container">
<div class="row">
<div class="col-md-6">
some content
</div>
<div class="col-md-6">
some more content </br></br>...
</div>
</div>
</div>
My problem is the the second div is higher then the other, because he contains more content.
How can i bring them to the same height?
I think Hakan's answer would work, but maybe tying the height of the columns to the height of the row as a whole is a better solution?
$(document).ready(function() {
var rowHeight = $('.row').height();
$('.col-md-6').height(rowHeight);
});
Here's a JS Fiddle: http://jsfiddle.net/rxSPG/
(I don't have enough rep to comment, so... ) In response to the table-cell solution, it does work, but setting the divs to display: table-cell; will break the responsive bootstrap styles (the divs will not stack on smaller screens.) I think JS is the only reliable way to do it.
You could try using the overflow property in CSS. You could clip the content or even cause a scroll bar to be present so the unseen content is accessable. Is this what you might be looking for?
use display: table/table-cell if you don't care about ie<=7
.row{
width: 100%;
display: table;
}
.col-md-6{
border: 1px solid;
display: table-cell;
height: 100%
}
jsfiddle: http://jsfiddle.net/LByZQ/
I have a couple of list elements and in there I have 2 div's floating left. I want that when the sencond div gets more content that the div left to it automaticly gets the same height.
I have both divs in a different bg color so when 1 has less content then the other, the div gets higher and the bg dont match horizontaly.
Maby you could take a quick peek at the website, then you know exactly what I mean,
http://newsbreak.vazcreations.nl (top middle container is the problem).
Thanks in advance
This problem can be solved reasonably easily without javascript. It's recommended that you don't use javascript to achieve something if it's avoidable as not all users have javascript enabled.
The technique that is employed to solve your problem, without using javascript, is called Faux Columns (this article goes one step further and uses images, but you don't need to.
Essentially you place the div on the right inside the left div. Set the width of the left div to the ideal total width of both divs, and then float the right div to the right. You may need to apply a clearfix to the left div so that is properly wraps around the second div.
Edit: I've just come across an article which proposes a few other solutions which seem to be worth looking into.
I think something like this should work:
EDIT: This is probably a better solution
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
}
#layout {
display:table-row;
}
#left-sidebar, #right-sidebar, #content {
text-align:left;
display:table-cell;
}
</style>
<div id="container">
<div id="layout">
<div id="left-sidebar">
<!-- left sidebar-->
</div>
<div id="content">
<!-- content -->
</div>
<div id="right-sidebar">
<!-- right sidebar -->
</div>
</div>
</div>
See this jsFiddle for a demonstration: http://jsfiddle.net/Qhk7R/
You could fake it with changing this:
.recent-item {
height: 50px;
list-style: none;
float: left;
}
to
.recent-item {
height: 50px;
list-style: none;
float: left;
background-color: #CDCDCD;
margin-top: 5px;
}
and removing the top margin for .main-date and .recent-bericht
Use jQuery:
var div_1_height = $('.div-1').height();
$('.div-2).height(div_1_height);
I have a problem with my HTML/CSS webpage. I want to have this layout:
http://img227.imageshack.us/img227/9978/layoutw.png
But all what I get is a layout in which the areas are only as high as the content is.
Here you can see my website: http://ud05_188.ud05.udmedia.de/spotlight/jquery.html I tried several work-arounds, but it does not work.
What's the best way to solve this?
you can use the following code
html
<div id="wrapper">
<div id="left"></div>
<div class="right">start of top</div>
<div class="right">start of bottom</div>
</div>
css
html, body {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
}
#left {
height:100%;
width:50%;
background:#09F;
float:left;
}
.right {
height:50%;
width:50%;
float:left;
background:#69a;
}
live example: http://jsbin.com/idozi4
What you're looking for is an adaptation of the Holy Grail method. In this case, #list1 is the 'left' column (as described in that article) and the rest goes into the 'center' column, so that means you can leave out the 'right' column altogether.
Basically something like:
<div id="container">
<div id="left">
#list 1 contents
</div>
<div id="center">
<div>
#list2
</div>
<div>
#data
</div>
</div>
</div>
#container {
padding-left: 200px; /* LC width */
}
#container > div {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
Heights will always be tricky... some solutions call for using explicit heights, but then if your content ever gets bigger, it'll overflow and look nasty, or worse, overflow and be inaccessible to the user.
You can use min-heights to display a best-case scenario, in which if the content needs to be taller, the minimum requirement will allow the div to stretch. You can use absolute positioning to get the layout that you want, but then the divs wont be flexible enough to accommodate content. You can use overflow: scroll to allow the divs to act like frames, but that is usually more annoying and messy-looking for the user.
I'd say use the above holy grail method to lay the containers out, and then use min-height for a best case scenario layout.
If none of those solutions are good enough, then there are also plenty of blog posts out there from experts about how to get equal height columns more consistently.
By default, giving something height: 100% will make the item as big as the item that contains it. This works for, say, divs within divs, but not for divs directly within the body tag. For this to work you need to set the height of the body element. Like so.
html, body{
height: 100%;
}
Hope this helps.
Update:
I think you are having trouble because you are trying to do two things which are tricky with CSS: fixed-to-bottom-of-page footers and 100% height. I think you will have to change the way that your footer works in order to get the 100% height working.
I haven't got a complete solution but I have made an example page:
http://deviouschimp.co.uk/misc/stackoverflow/columntest.html
That should sort out your 100% height issues. The footer doesn't always match the bottom of the content (#wrap height:94% gets it close, but it's not perfect).
This sticky footer technique should sort the rest out: http://www.cssstickyfooter.com/
Good luck!
I'm building a site and I have a proble.
I have a composed divs :
<div id="content">
<div id="left">
<div id="leftcontent">...</div>
</div>
<div id="center">
<div id="centercontent">...</div>
</div>
<div id="right">
<div id="rightcontent">...</div>
</div>
How can I put left, center, and right in the same line ?
which code should I add ?
thanks!
You can use float css attribute like:
#left { float: left }
#center { float: left }
#right { float: right }
Why are you using divs? A div has display of block, but a span would work better, as it is inline, then the float attribute suggested by Ivan would work well.
This CSS should do the trick:
#left {
width: 20%;
float: left;
}
#center {
width: 60%;
float: left;
}
#right {
width: 20%;
float: left;
}
Adjust widths as appropriate.
An alternative method is to use a css grid framework. Here are some of the popular ones:
http://960.gs/
http://www.blueprintcss.org/
http://developer.yahoo.com/yui/grids/
My favorite happens to be: Object Oriented CSS
Using a css based grid system is somewhat recommended as they are very well tested to work across multiple browsers.
One possible negative effect, is that you have to structure your markup in a way that is specific to the framework you choose.
The other comments answer your question, but watch out that you're not starting the descent into div hell...divs doing nothing more than contain divs can be a code smell.
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.