I tried to get two divs next to eachother. The right one has a fixed width, but the left one has to be able to resize. I tried multiple ways, but none fit all my requirements:
Right one has fixed width
Parent div has height of largest child (wraps its childs)
Left one has to resize
Html structure has to in this order (reason at bottom):
html:
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
I tried absolute positioning the right div and adding a margin on the left one and it achieved all requirements, except that the parent div doesn't wrap the largest child (as expected)
http://jsfiddle.net/0fxL71xL/3/
.container{max-width:400px;position:relative;}
.variable_width{margin-right:100px;}
.fixed_width{width:100px; position:absolute;right:0;top:0;}
I also tried using inline-block and max-width but then the divs don't align at the top, and I don't know how to handle the whitespace issue. Most important, it does not make the left div resize: http://jsfiddle.net/0fxL71xL/4/
.container{max-width:400px;}
.variable_width{max-width:290px; display:inline-block;}
.fixed_width{width:100px; display:inline-block;}
I also tried a float right on the right div, but it didn't come near what I wanted.
The closest I got was changing the order in html and using float:right on the div that has to go right, but in this case I can't use an #media query to have it display below the left div at a certain moment.
EDIT:While paulie_d's answer fixes it, I would prefer something that has a large browser support
flexbox can do that.
JSfiddle Demo
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.fixed_width {
width: 200px;
background: #bada55;
}
.variable_width {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: plum;
height: 100px;
}
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
.container {
width:100%;
}
.variable_width {
max-width: 70%;
display: inline-block;
background-color:blue;
margin-right: -3px;
}
.fixed_width {
width:100px;
width: 28%;
display: inline-block;
background-color:red;
vertical-align: top;
}
now you can use this code. i think it will work fine.you can add some content in variable width div class and check whether it is working or not.i have checked it and it really works :) .
http://jsfiddle.net/souraj/vaqbsdzk/
After more searching I came across this interesting page which sums some techniques to achieve exactly what I wanted. It gives the most complete answer.
http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/
Related
I can not understand how css works, and it's annoying me. I was trying to do some basic side by side two divs and one div below them.
At first I've learned that I had to give float:left for both side by side divs. For curiosity I did'nt gave float:left for the second side by side div, and I came across this layout:
(source: imge.to)
Then I gave float:left for the second side by side div, and I came across this layout:
(source: imge.to)
Question: I didn't gave float:left for third div but it didn't act like the first screen shot. Why?
css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.blog-posts {
width: 50%;
background-color: #0000ff;
float: left;
}
.other-posts {
width: 25%;
background-color: #00ff00;
float: left;
}
.author-text {
background-color: #ffff00;
}
html code:
<div class="container">
<div class="blog-posts">dend endje denjde akdlsd gsjgıdg sadsujrg spsadnajd asdnsajdd</div>
<div class="other-posts">extra dummy text</div>
<div class="author-text">author text</div>
</div>
When you use a float, you break the natural box-model behavior of the markup.
Your first floated element has a width of 50%, relative to the parent (1000px) it will take the half of the .container. The second (floated) element will take the next 250px. And here comes the good thing.
The third element, which isn't floated, is also a div, thus a block-level element (so implicitly it will take 100% of the width of its parent). If you set the background-color of your first and second element to a transparent one #0000ff00 and #00ff0000 respectively. You will see your third element is growing behind them.
This is, what I mean with "breaking the box-model". Now, to understand this beter, you could start giving a explicit width to the third element. Let's say: 90%, you will see how the yellow background will reduce itself from the right side.
If you set the width to 50% it will "jump" down, to the second line. It will be even broad as the first element, but two times height. With other words, it will try to fit in the first available space.
To avoid this, in the past, we used the clearfix hack... but since flexbox and css grids are broadly supported, we don't have to rely in floats anymore for this side-by-side layouts.
Float has their own use cases, is not that float sucked, it's just not meant for layout.
For more information on this topic you can check this great article about floats on CSS-Tricks.
Wrap the items you want side by side in another wrapper, then apply flexbox to that wrapper:
.my-flex-wrap {
display: flex;
}
Then remove all the floats. Done.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.my-flex-wrap {
display: flex;
}
.blog-posts {
width: 50%;
background-color: #0000ff;
}
.other-posts {
width: 25%;
background-color: #00ff00;
}
.author-text {
background-color: #ffff00;
}
<div class="container">
<div class="my-flex-wrap">
<div class="blog-posts">dend endje denjde akdlsd gsjgıdg sadsujrg spsadnajd asdnsajdd</div>
<div class="other-posts">extra dummy text</div>
</div>
<div class="author-text">author text</div>
</div>
I need a gallery of images. Thereby it should be responsive. When there are too many images for one line, they should be displayed in the next.
That's what I have already implemented. My problem now is that the last line (when it has just one image for example) is centered, too. But It should be floated left.
I tried float:left, but this just makes everything float left and not center anymore.
Here is an JSFiddle-Example.
How can I have the last image float left?
HTML:
<div class="psAppWrapper">
<div ng-repeat="app in applications track by $index" class="psAppTile">
<img src="{{app.icon}}" class="psAppIcon"/>
<p class="psAppTitle">{{app.title}}</p>
</div>
</div>
CSS:
.psAppIcon {
width: 80px;
height: 80px;
}
.psAppTitle {
text-align: center;
}
.psAppTile {
width: 80px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.psAppWrapper {
width: 100%;
text-align:center;
}
EDIT
When I add float left it looks like this:
The red one is psAppWrapper. Here you can see that the images are not centered. The left ones have much less space to the left than the right ones to the right. The spaces should be the same.
This
.psAppWrapper {
width: 100%;
text-align:left; /* Changed this from text-align:center */
}
should align the last element to the left.
Nowadays, positioning block items via float: left; is considered bad practise. You should use display: flex; to align block items in the way you like. For the last row, use flex-wrap: wrap;. So you should end up with this CSS:
.psAppTile {
display: flex;
flex-wrap: wrap;
}
You can find explanations and more information on display:flex; here.
But I think that you'll need another technique, display: grid; might do the trick. I must admit that I've not yet used this for layout. [You can find a complete guide here.][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)
<div id='container'>
<div class='left'></div>
<div class='right'></div>
<div class='clear'></div>
</div>
Given the simple markup above, which can be seen in action here at jsFiddle, how do you get the floated right div to take up the remaining height of its parent container that doesn't have an explicit height? The parent container's final height is determined by the floated left div.
Typically, I solve this issue through Javascript, and fix the heights after the page has loaded. But, there must be an alternative, standard, and optimal method of how this is handled.
I think this is just an inherent issue of structuring a layout this way, so what is the alternative beyond using a <table>?
Can't be done without explicit height on the parent using floats.
You can however use display: table-; and table-cell which mimics the behavior of tables without actually using them:
#container {
width: 200px;
background-color: green;
display: table;
}
.left {
display: table-cell;
width: 30px;
height: 200px;
background-color: red;
}
.right {
display: table-cell;
height: 100%;
width: 30px;
background-color: blue;
}
This way you don't need the clearing element and the two divs will always take up 100% of the height, as long as it's declared.
http://jsfiddle.net/6XagR/4/
I have a div (#itemSelector) containing a variable type of div (.item). I need to evenly space the .item divs in the parent div. The .item divs have display: inline-block and need to stay that way.
Just for clarity: I want the div's contained in #itemSelector to get evenly spaced horizontally along the entire width of the div. The amount of divs in the parent can vary.
jsFiddle of the simplest usecase: http://jsfiddle.net/xTZ8z/
Edit: thirtydot suggested a solution to me which interesting looking
Created a jsFiddle of it: http://jsfiddle.net/xTZ8z/82/.
Wrapping a div around my .item divs with display: table-cell seems to work, tho this is not entirely what I'd like. Any other suggestions like this?
I know you stated that you needed to keep your divs with display: inline-block, but this method seems to achieve the effect you are looking for.
JSFiddle of the code: http://jsfiddle.net/xTZ8z/40/
EDIT: #Exelian this achieves the desired effect you are looking for: http://jsfiddle.net/xTZ8z/63/
EDIT: #Exelian This is a slightly altered and commented version of the previous code:
http://jsfiddle.net/xTZ8z/88/
I hope that helps!
You could do something like this:
#itemSelector {
width: 100%;
border: 1px dashed red;
margin: 0 auto;
padding: 0;
}
.item {
display: inline-block;
background-color: grey;
width: 25%;
text-align: center;
height: 100px;
line-height: 100px;
margin: -2px;
padding: 0;
}
That should do the trick
Example here
What about a table set to width 100%?