Have Three columns..Combine width of all three is fixed.. 2nd ( center ) column will have dynamic content.. I need left and right column to fill out remaining space ( container width - center column dynamic width )equally.
Example:
http://jsfiddle.net/htKje/
<div class="container">
<div class="bg"></div>
<div>Lorem Ipsum</div>
<div class="bg"></div>
</div>
CSS :
.container { width:500px; }
.bg {backgrould:#CCC; }
If you need the left and right columns just for setting the background, then most probably, you don't even need them at all.
Simply setting the background on the .container, giving the same container text-align: center, making the center column inline-block and reseting the background and text-align on it will do the trick.
demo
HTML:
<div class='container'>
<div class='c'>booooo add remove text here</div>
</div>
CSS:
.container {
background: #ccc;
text-align: center;
}
.c {
display: inline-block;
background: white;
text-align: left;
}
Related
So, i have a fixed width div that should go on middle of the page, but before it& after it, i should have auto width divs that span from edge to edge of the page, like this:
<div class="left">Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div class="right">Content goes from center div to right edge of screen</div>
https://jsfiddle.net/hww17nzL/2/
Any suggestions how this can be done?
Use Flexbox on a container element.
.container {
display: flex;
justify-content: space-between;
}
.center {
flex: 0 0 300px;
}
<div class="container">
<div>Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div>Content goes from center div to right edge of screen</div>
</div>
there are a number of ways to do this. you can use display:table-cell
without any more specific requirements from you...i cannot say which would be best for you to use
let me know if this works for you
see snippet or > jsfiddle
.center {
width:300px;
text-align:center;
}
.left {
}
.right {
}
div {
display:table-cell;
}
<div class="left">Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div class="right">Content goes from center div to right edge of screen</div>
I am using the awesome Select2 jQuery plugin.
Currently I have a fixed-width div floating to the left of a fluid-width div, this works well:
<div class="row">
<div class="col left">Label</div>
<div class="col right"></div>
</div>
.row {
display: table;
}
.col {
display: table-cell;
}
.col.left {
width: 150px
}
But it doesn't work so well when I add a select2 box inside the fluid right div. Now it becomes clear that the fluid right div is not actually 100% width, it adapts to the width of its content, and as a result the select2box also changes size constantly:
<div class="row">
<div class="col left">Label</div>
<div class="col right"><select style="width: 100%" class="select2">
Here is a JSFiddle demonstrating the problem: http://jsfiddle.net/vfa4831b/4/
How can I make the .right fluid-width div adapt to the width available, and stay at that size?
Adding width: 100%; to .col.right makes the div 100% width, but also overflows the boundaries of .row.
UPDATE: I need IE8 support, unfortunately, so can't just use calc.
Try this:
.row {
display: table;
width: 100%;
background: #ccc;
}
Your row that uses display: table wasn't actually being set to be 100%.
What I'm attempting to do now, is creating a container (with floated elements) that adapts its width to the elements that fit..
The simplest example I can think of is this:
A container is filled with 300px * 300px floating divs. As long as the divs don't fill up a row, the width of the container (cleared both) is the same as the combined width of the divs, or 1 div = 300px, 2 divs = 600px and so on. However, if the divs don't fit on one row, they go on to the next and the width of the container remains at 100% even though the divs on the first row only take up (let's say) 95%.
Is there a pure CSS way of making that container no wider than its contents?
#main {
float: left;
background-color: #f00;
}
#main > :last-child:after {
clear: both;
}
.float {
width: 150px;
height: 150px;
float: left;
background-color: #00f;
}
<div id="main">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
Here's a JSfiddle: http://jsfiddle.net/j9A6T/
Can you lose the red part to the right?
I have tried using the float/inline-block/table solutions on the container, but they won't work in this case.
Isn't it a case where a clearfix (to apply to your container div) would help?
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
More here : What is a clearfix?
I am trying now since hours, nothing helps.
Just simple:
I have two divs with variable (dynamic) width.
Both should be side by side in a wrapper div, that has a fixed width.
Everything I try: I see leftDiv and rightDiv either floating to the left or centered, but div2 under div1.... Thanks a lot.
<div class='wrapper'>
<div class='innerWrapper'>
<div class='leftDiv'>
</div>
<div class='rightDiv'>
</div>
</div>
</div>
What is the correct css? The problem is, that it does not work to give the innerWrapper automatically the width of both divs (leftDiv and rightDiv...)...
I tried:
.wrapper {
width: 600px;
text-align: center;
}
.innerWrapper {
width: auto;
}
.leftDiv {
display: inline-block;
}
.rightDiv {
display: inline-block;
}
Use display: inline-block; on those divs ..
http://jsfiddle.net/RK6R4/
I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.
Here's a js fiddle of this:
http://jsfiddle.net/TrJqF/
Thanks
Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.
jsFiddle example
Actually there is no difference between both the height. Apply yellow background color to inner class and see the difference in explicit and no height.
both square div doesn't have content and inner div have content. The css box aligning by itself based on its content. Add empty space to the square div as follows:
<div class="btn">
<div class="square"> </div>
<div class="inner">Hello</div>
<div class="square"> </div>
</div>
If you want you can add top and bottom margin 1 or 2 pixel which will show your expectation.