My JSFiddle:
http://jsfiddle.net/3YGdL/
My CSS:
#sidebar {
width: 100%;
background-color: blue;
}
#sidebar div {
width: 33%;
display: inline-block;
}
#sidebar-left {
background-color: green;
}
#sidebar-center {
background-color: red;
}
#sidebar-right {
background-color: yellow;
}
#sidebar li {
list-style: none;
}
My Question:
I want the 3 columns in one line with exactly the same width and aligned top. The content of those 3 columns should be dynamic, this means, the height should automatic change to the max height. We never know which of the 3 columns is the highest one, so this should be dynamic too.
My current solution is in the JSFiddle, I've tried other stuff like "display: table" but this was even worse...
I've tried this, but it didn't work for me...
Here is pure CSS solution
The HTML sturcture is the same, only i altered few lines in your CSS. I assigned #sidebar display to table.
Then, assigned #sidebar>div to display as the table-cell for equal height to all columns. For improving form UI i added this code
div.form-group input, div.form-group textarea {
clear:both !important;
float:none;
margin:5px;
display:block;
}
For futher details refer this URL
Hope this will be useful
Here is a solution with a simple jQuery Script: Example
First I gave every section a class .column to target them more easily.
Then I get the height of every element, and apply the highest height to all of them.
heightArrayHeading = [];
$('.column').each(function() {
$(this).css('height', '');
heightArrayHeading.push($(this).outerHeight());
});
$('.column').css('height', Math.max.apply(Math, heightArrayHeading));
Finally I gave .column vertical-align:top; to align them on top.
is this what you looking for?
JSFIDDLE
please remember that display:inline-block by default is baseline so you have to set it vertical-align:top, plus inline-block create whitespaces, you can see solutions for that here:
INLINE-BLOCK FIXES
UPDATE
now that i read carefully your question I understand you want same height for 3 columns, so I give you a link with some methods to achieve that:
Fluid Width Equal Height Columns
Hope it helps!
Related
i've got a problem with display: table-cell; and the space between the cells. I'd like to have dynamically the same width for all cells.
See JSFiddle
How you can see the "Ausstattung & Skizze" is much wider than the others. Is there a way to dynamically set the same width to all cells?
You can use table-layout:fixed; on the parent element which holds display:table;
ul{
display: table;
width: 700px;
table-layout: fixed;
}
This way, every cell will get the same width if you don't force their width, no matter how many cells you have in a row.
(Edit: see this JSfiddle http://jsfiddle.net/m8evqnv0/ )
li {
display: inline-block;
width: 150px;
}
edit: no need for inline-block, with width:25%
if the width of the unordered list is fixed, then:-
li
{
width: 25%;
}
best practice:- use classes for li and then style the class.
if you want the table to be responsive, use table markups then. it will work like a charm.
fiddle:- http://jsfiddle.net/4wsmx8t0/3/
See Below for the Self-contained Example
Pictures of what I am trying to do, and what I actually get:
I want to create css rules so that my content looks like this (correct):
I am struggling to find a simple solution online, so my content looks like this (wrong):
Summary of what I'm trying to achieve:
I couldn't find a solution on stackoverflow or any css blog which provided solutions to similar but incompatible problems.
I have two floated divs, left and right on a row div. The left div contains an image that stretches out until it is the width of the left div. The left div's height is dependent on the img it contains. This is the height that I want the right div to conform to. I need this conformity so that when there is no more room on the right div, the overflow:hidden code will hide the excess text.
Fixed heights are not allowed. I am trying to avoid Java Script for this. Is there a solution in pure CSS?
CSS snippet
.left {
float:left;
width:50%
}
.right {
float:right;
width:50%;
background-color:darkgrey;
overflow:hidden;
}
img {
min-width:100%;
height: auto;
width: 100%;
}
As you can see, I don't have any code here to handle equal div heights because all the solutions I've tried have not worked.
Here is my jsfiddle so you can see the problem:
http://jsfiddle.net/1upodwg9/
To use overflow: hidden; the container would need a defined height, otherwise it doesn't know where the overflow begin. Since you want to have a dynamic image (with different heights) I'm afraid you have to use javascript.
Fiddle
http://jsfiddle.net/1upodwg9/14/
.child-row {
display:block;//added
background:red;
}
.left {
float:left;
width:50%;
height:100%;//added
display:inline-block;//added
}
.right {
width:50%;
background-color:darkgrey;
display: inline-block;//added
}
Fiddle example when you have more content
http://jsfiddle.net/1upodwg9/15/
Something like this fiddle ?
$(window).resize(function () {
var height = $("#leftDiv").css("height")
$("#rightDiv").css("height", height);
});
If you're only catering to IE8+ and/or modern browsers you can use display: table, display: table-row, display: table-cell
.parent {
margin: auto; /* helps place in middle */
width: 70%;
display: table;
}
.child-row {
display: table-row;
}
.child-col {
display: table-cell;
vertical-align: top;
}
Example: http://jsfiddle.net/1upodwg9/16/
(Sorry, I changed the image cos for some reason it wasnt loading on my end)
EDIT: Actually, it doesn't work for when the image is too small (the right col will set the height)
Demo
Hi, I have three div here. I want to give equal spacing on it's left and right side. I want to make it generic.
PROBLEMS I FACE
1.If i add more `div` element, it requires many CSS changes
2. What if content length increases? It ll decrease it's spacing.
3. I want to make it possible without using width and inline-block.
If any solutions possible, please let me know. If we 'MUST' use width or inline-block, suggest that also. Thanks in advance. My css as follows:
.wrapper
{
width: 100%;
height: 60px;
background-color: #454545;
}
.div1,.div2,.div3
{
float: left;
margin: 0 15% 0 10%;
color: #fff;
}
The method you are using, will not work if you change your content or change number of columns. Following are possible solutions as far as I know:
Option1:
.div {
width:33.33%;
display:inline-block;
}
Disadvantages:
1) inline-block leaves white space between elements. Comment out spaces between elements i.e.
2) As, column is given width, as the columns change, width needs to be changed.
Demo here.
Option2:
.wrapper {
display:table;
table-layout:fixed;
width:100%;
}
.div {
display:table-cell;
}
Disadvantages:
1) Doesn't work in IE7.
Demo here.
I'm trying to create some evenly spaced columns (an ol), with the columns themselves being fixed width.
So far, I've managed to achieve the desired effect by using table layout, and nesting an additional element inside the list item.
HTML:
<ol>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ol>
CSS:
ol {
display: table;
width: 100%;
}
li {
display: table-cell;
}
div {
margin: 0 auto;
width: 100px;
height: 250px;
}
This works great, but has the following 2 shortcomings:
As you can see in the demo, the first & last columns don't line up flush with the parent's outer edges.
This can't really be used responsively. The only thing you can do at smaller widths is stack them, but I'd like to split them (2 or 3 per row).
Is what I'm after even possible in CSS alone? I know there are a plethora of ways to accomplish this in JS, but I'm after a CSS-only solution.
P.S. I don't care about IE7-, but I do need to support IE8. CSS3 selectors are OK though, since I'm anyhow using selectivizr in the project (I know that's JS ;-)).
It seems appropriate for you to recycle "how to *really* justify a horizontal menu". Basically the behaviour you're describing is that of inline-block elements of identical width having text-align:justify applied:
ol {
/*force the desired behaviour*/
text-align: justify;
/*remove the minimum gap between columns caused by whitespace*/
font-size: 0;
}
li {
/*make text-align property applicable*/
display: inline;
}
/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
content: "";
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
div {
display: inline-block;
width: 100px;
height: 250px;
}
Working fiddle.
NB: you may have to re-apply desired font-size and text-align to descendants of ol depending on the reset you're using (i.e. to prevent these properties from being inherited)
Ok my first thought would be to use media queries to gain a responsive approach for how many you want to show per row on differing screen sizes and my second would be to use
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
this will stop the paddings you may put in later adding onto the box model size.
Hope this is close to what you are after.
I'm currently trying to center an horizontally, as in the object (box if you will) itself, not the text inside. I've tried many suggestions and followed many tutorials, yet nothing works... I finally ended up setting the margins myself, but I'd like it to adjust itself dynamically. This is the code I currently have:
.navbar {
margin:auto;
margin-left:30em;
display:none;
position:fixed;
top:0px;
list-style-type:none;
padding:0;
overflow:hidden;
z-index:200;
}
.navbar li {
float: left;
display:inline;
width:120px;
text-align:center;
}
.navbar #left {
left:0px;
width:100px;
height:35px;
background:url('res/navigation.png') 0 0;
}
... and so on. The html is really simple, just the list with the corresponding class and id attributes.
The proposed by many solution to set margin: 0 auto; doesn't work because you've got position: fixed; on your ul ;)
To my mind a good way of centering positioned elements is this:
.someelement{
width: 600px;
position: fixed;
left: 50%;
margin-left: -300px; //here we put half of the element's width
}
A live example of this method can be seen here: http://jsfiddle.net/skip405/G8LrV/
The only problem with this method is that we set the fixed width.
If you have an element whose width may change - you'll probably have to calculate it dynamically by jQuery, for instance, and then set the negative margin.
A live example of it can be seen here: http://jsfiddle.net/skip405/G8LrV/1/
Centering with CSS requires using margin: 0 auto -- as others have mentioned, and as I think you've already tried.
The reason this may not have worked for you is that it also requires the object to have a defined width and to have a block type display property (ie either display:block or display:inline-block).
It needs to be a block because only blocks can be manipulated in this way.
And it needs to have width because blocks default to 100% of the width of their container, which obviously leaves no room for it to be centered. The width can be a percentage rather than px if you want it to adapt to the size of the container, but it must be set.
If you're still struggling with it, try using Firebug (or similar) and examine what the browser thinks it's doing with the box. You may spot the problem here.
And if that doesn't help, create a JSFiddle example; this will help you see what's going on, and also give you something to show here.
It's a bit tricky, and you'll have to put the <ul> into a container. Then use the following css:
div {
text-align: center;
}
ul {
text-align: left;
display: inline-block;
width: auto;
}
Where div is the container around ul.
See this fiddle for live demo
You need to set an explicit width in order for the margin:0 auto to work.
Alternatively you can use some position trickery, as seen here, for when the width is an unknown.
And you'll need to remove display:none from .navbar or you won't see anything; unless there's some other code at work that isn't included.
to center a div relative to its container you need to do
width:75%;
margin-left:auto;
margin-right:auto;
that way the object centers itself.
You can try putting the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code{display: flex; justify-content: center; width: 300px;
Put the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code {
display: flex;
justify-content: center;
width: 300px;
}