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%.
Related
This is a hard one to explain, so I'll do my best.
As it stands now, I have a wrapper div that has the iceberg image as it's background. It's styled in that the background image sizes to fit the user's screen. Within that wrapper div, I have two .rows, each containing a column.
Now the tricky part: I want one row to just span the top of the water, with the other spanning the bottom of the water. Here's a rough concept.
Right now these rows are given a min-height to match that horizon, however when the user resizes their screen or has a different browser width than my dev environment, of course it doesn't work the same.
Now, how can I go about getting these rows to match heights with the background image? I had considered slicing the image into two, but I imagine there's got to be a much more resourceful way. Here's the CodePen I'm working with: http://codepen.io/jwindeknecht/pen/qOqwPp
If you can offer any advice or if I can clear anything up, let me know! Thanks.
<div class="hero">
<div class="row over">
<div class="large-6 large-offset-6 columns">
<div class="inside">
<h1>Hello World</h1>
</div>
</div>
</div>
<div class="row under">
<div class="large-6 large-offset-6 columns">
<div class="inside">
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
.hero {
background: url(http://i.imgur.com/fdRuNIF.jpg) center top no-repeat;
background-size: cover;
min-width: 100%;
div {
display: table;
.inside {
display: table-cell;
vertical-align: middle;
}
}
}
.over div { min-height: 275px; }
.under div { min-height: 275px; }
Okay! I figured this out. I know the dimensions of the image, so I had the min-height of the row set to a certain percentage of the the width of the image.
e.g. The image is 1500px wide. The row that covers just the horizon is 300px high. Therefor the min-height of the row is set to 20vw.
So regardless of the background image width, the height of the row matches up due to using the vw. Here's a pen example: http://codepen.io/jwindeknecht/pen/RWyBGW
And the new code is simple:
.over div { min-height: 275px; }
to
.over div { min-height: 20vh; }
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?
Here is the Code:
<div id="content" class="row shadow" >
<div id="test2" class="col-lg-4">
<p>dsfdsfasdfdasfdsafdsfasdf</p>
</div>
<div id="test3" class="col-lg-4" style="">
<p>breerwwerewrqerewrqewqrwqer</p>
</div>
<div id="test4" class="col-lg-4">
<h2>Directlinks</h2>
<p>BRRRRRRRRRRRRRRRRRRRRRRRRRRRR</p>
</div>
</div>
..and i want to set:
border-right:1px solid #ddd;
to id #test2 and #test3
the problem is, that the div don't want to take the height with height:100% from the parent div which is fixed to the content.
if i give one test* an absolute position it takes the max height of the parent div, but i can't set all child div to absolute without destroying the auto fix to the screen for re-sizing.
I added the following code to your example:
#media (min-width: 1200px) {
#content { overflow: hidden; }
#test2, #test3, #test4 {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
}
The padding-bottom: 1000px adds a padding of 1000px to the bottom of each of your columns.
The margin-bottom: -1000px; basically removes this padding again by decreasing the height of each column by 1000px. Each column now has at least 1000px height (the padding + the content).
By giving the #content overflow:hidden you cant see the additional 1000px at the bottom of each column, so the columns seem to have all equal height (try removing the overflow:hidden) to see that they are still different.
The media query (#media (min-width: 1200px)) makes sure to only apply those additional rules when your columns should be displayed next to each other.
Working example: http://jsfiddle.net/R8gH9/3/
The reason it doesn't work is because the parent doesn't have a defined height. Percentage values are based on the explicit height (or width, for that matter) of the parent why nothing happens if you let it flow freely.
Typically, when working with column based layout like this, you can use the display: table and table-cell to achieve what you want. I made a simple example to demonstrate this.
CSS:
.outer {
display: table;
}
.col {
display: table-cell;
border: 1px solid red;
}
HTML:
<div class="outer">
<div class="col">
text<br/>
text<br/>
text<br/>
</div>
<div class="col">
text
</div>
<div class="col">
text<br/>
text<br/>
</div>
</div>
than set it to "position:relative;" or
"position:absolute; display:block;"
I know this isn't exactly a new topic but all my researches were without a result.
What I try to accomplish:
Two divs inside one div, next to each other. (easy: float, inline-block)
If the browser window is to small the divs should stay next to each other.
What happens right now:
If the browser window is not wide enough, the second div slips under the first one.
Example: http://pastebin.com/e9cuWjwT
How can I solve that?
If you add width to the container surrounding your divs, they will stay next to each other even if the screen real estate gets smaller. Because you've told the browser how big you want container to be, resizing the screen won't affect their placement.
Here's is a fiddle with very simplified code to show a scenario that works:
http://jsfiddle.net/Lera/CmJhw/1/
CSS:
.wrapper {
width:1024px;
}
div {
display: inline-block;
}
HTML:
<div class="wrapper">
<div>First Div</div>
<div>Second Div</div>
</div>
You could try something like:
HTML:
<div>
<div class="selection">Menu 1</div>
<div class="selection">Menu 2</div>
<div class="selection">Menu 3</div>
<div>
CSS:
div {
border: 1px solid #CCC;
display: table;
width: 100%; /* set to what you need */
}
div > div {
display: table-cell;
vertical-align: top;
}
The table cells will always stay in a single row and their widths will adjust as the width of the parent block (with display: table) adjusts to the width of the browser.
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;
}