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/
Related
I've got a group of buttons (divs) which I would like to be the same length for all buttons within a logical group.
I could simply do a min-length for the CSS style of the button, however some button groups are short, while others are very long. This makes a uniform min-length either insufficient for long groups or wasteful/stupid looking for short ones. Additionally, multiple groups (short and long) can appear on the same screen.
(These divs are all styled with display: inline-block, so that's why they don't fill the width of the container)
I've thought of a few nasty solutions to this, but none are preferable:
Set a specific min-length for each group
Use JavaScript to resize the buttons
I was wondering if there was a generic, pure CSS solution to the above problem instead of using either of these methods. Thanks for any help you can provide.
Edit: Here is the markup and CSS I've got so far. Pretty simple:
HTML:
<div class="wrapper">
<div class="button">Lorem ipsum</div>
<div class="button">Lorem ipsum dolar</div>
<div class="button">Lorem</div>
</div>
CSS:
div.button { display: inline-block; min-width: 50px; }
Wrap similar buttons in a container div with a desired width and set the inners divs to:
box-sizing: border-box;
width: 100%;
This will allow you to edit the widths of a logical grouping in one place.
wrap them both in a container.
<div class="group">
<div class="button">Hi</div>
<div class="button">Wassup</div>
<div class="button">Yo</div>
</div>
then apply css like this:
display:inline-block;
min-width: 100%;
and then set the div "group" that groups those divs in the width you wanted to
Use min-width and max-width:
div{/*use the selector what you're using*/
min-width: 150px;
max-width: 350px;
width: auto;
display: inline-block;
}
If you want to get a uniform width, then you have to define a class name and style like this:
.width1{
width: 200px;
}
.width2{
width: 300px;
}
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'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%;
}
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 am trying to lay out a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be smaller than that on the left. I would like the div on the right to always be tall enough to reach the separator for the row below it. How can I make my background color fill that space?
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
Edit: I agree that this example is very table-like and an actual table would be a fine choice. But my "real" page will eventually be less table-like, and I'd just like to first master this task!
Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed. Editing my post in Firefox 2 seems to have worked, FWIW.
Another edit: Yeah, I unaccepted GateKiller's answer. It does indeed work nicely on my simple page, but not in my actual heavier page. I'll investigate some of the links y'all have pointed me to.
Ahem...
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".
Give this a try:
html, body,
#left, #right {
height: 100%
}
#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}
<html>
<body>
<div id="left">
Content
</div>
<div id="right">
Content
</div>
</body>
</html>
Some browsers support CSS tables, so you could create this kind of layout using the various CSS display: table-* values. There's more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: Everything You Know About CSS is Wrong
If you need a consistent layout in older browsers that don't support CSS tables, you need to do two things:
Make your "table row" element clear its internal floated elements.
The simplest way of doing this is to set overflow: hidden which takes care of most browsers, and zoom: 1 to trigger the hasLayout property in older versions of IE.
There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question which method of 'clearfix' is best and the article on having layout for other methods.
Balance the height of the two "table cell" elements.
There are two ways you could approach this. Either you can create the appearance of equal heights by setting a background image on the "table row" element (the faux columns technique) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.
Faux columns is the simpler approach and works very well when the width of one or both columns is fixed. The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <div id="foo"></div> and you linked to #foo)
Here's an example using the padding/margin technique to balance the height of the columns.
html, body {
height: 100%;
}
.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}
.right-column {
width: 20%;
float: right;
}
.left-column {
width: 79%;
float: left;
}
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
This Barcamp demo by Natalie Downe may also be useful when figuring out how to add additional columns and nice spacing and padding: Equal Height Columns and other tricks (it's also where I first learnt about the margin/padding trick to balance column heights)
I gave up on strictly CSS and used a little jquery:
var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();
if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);
Here's an example of equal-height columns - Equal Height Columns - revisited
You can also check out the idea of "Faux Columns" as well - Faux Columns
Don't go the table route. If it's not tabular data, don't treat it as such. It's bad for accessibility and flexibility.
I had the same problem on my site (shameless plug).
I had the nav section "float: right" and the main body of the page has a background image about 250px across aligned to the right and "repeat-y". I then added something with "clear: both" to it. Here is the W3Schools and the CSS clear property.
I placed the clear at the bottom of the "page" classed div. My page source looks something like this.
body
-> header (big blue banner)
-> headerNav (green bar at the top)
-> breadcrumbs (invisible at the moment)
-> page
-> navigation (floats to the right)
-> content (main content)
-> clear (the quote at the bottom)
-> footerNav (the green bar at the bottom)
-> clear (empty but still does something)
-> footer (blue thing at the bottom)
I hope that helps :)
No need to write own css, there is an library called "Bootstrap css" by calling that in your HTML head section, we can achieve many stylings,Here is an example:
If you want to provide two column in a row, you can simply do the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>
Here md stands for medium device,,you can use col-sm-6 for smaller devices and col-xs-6 for extra small devices
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
A 2 column layout is a little bit tough to get working in CSS (at least until CSS3 is practical.)
Floating left and right will work to a point, but it won't allow you to extend the background. To make backgrounds stay solid, you'll have to implement a technique known as "faux columns," which basically means your columns themselves won't have a background image. Your 2 columns will be contained inside of a parent tag. This parent tag is given a background image that contains the 2 column colors you want. Make this background only as big as you need it to (if it is a solid color, only make it 1 pixel high) and have it repeat-y. AListApart has a great walkthrough on what is needed to make it work.
http://www.alistapart.com/articles/fauxcolumns/
I can think of 2 options
Use javascript to resize the smaller column on page load.
Fake the equal heights by setting the background-color for the column on the container <div/> instead (<div class="separator"/>) with repeat-y
Just trying to help out here so the code is more readable.
Remember that you can insert code snippets by clicking on the button at the top with "101010". Just enter your code then highlight it and click the button.
Here is an example:
<html>
<body>
<style type="text/css">
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>
This should work for you: Set the height to 100% in your css for the html and body elements. You can then adjust the height to your needs in the div.
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}
It's enough to just use the css property width to do so.
Here is an example:
<style type="text/css">;
td {
width:25%;
height:100%;
float:left;
}
</style>
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>