Situation: I have a container with two direct children, we will call them left and right.
left should never be allowed to extend past the height of right, however right should be allowed to extend past the height of left.
I can't figure out how to do this with CSS (hopefully while maintaining the simplicity of my markup)
example html
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
example css
.wrapper {
display: inline-block;
margin: 10px 0;
}
.left {
float: left;
width: 60px;
background-color: #999;
}
.right {
float: left;
width: 540px;
border: 4px solid #666;
padding: 8px;
}
or see what I mean here
It's kind of an common problem. The thing is, you need either a CSS/background image trick or use javascript. One common used is Faux Columns.
Yes, you need to rely on JavaScript for this kind of problem, you could just always set the min-height of the left column according to the height of the right column, or something similar to that!
Using jQuery, this might help you getting started! http://www.cssnewbie.com/equal-height-columns-with-jquery/
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 am trying to do a pretty simple thing, getting a container to line up to the right side of another container. For some reason I am really struggling.
I made a very basic fiddle to show what I am trying to do.
https://jsfiddle.net/Lvoy1dtd/
I have tried adding
display: inline;
float: right;
to
.top_post_out {
border: solid 1px #C0C0C0;
border-radius: 8px;
width: 30%;
margin-right: 25px;
padding-top: 25px;
}
As well as making it inline-block and many other things, but it not lining up.
What am I doing wrong?
https://jsfiddle.net/Lvoy1dtd/2/
Add "float: left" to your first container
rankingTableOut {
border: solid 1px #C0C0C0;
border-radius: 8px;
width: 60%;
margin-left: 15px;
padding-top: 25px;
float: left;
}
You need to add display:inline-block; to the rankingTableOut class instead of the top_post_out. Divs are by default block elements, which causes them to have a line break after them. So your next element is floating to the right of the next line, not the right of the current line as you wanted. The inline-block property will prevent the line break while preserving the width and height of your element.
Floating elements need to be defined in your markup prior to, or at the start of the content that is supposed to "float around it". Just reordering your containers solves your problem, no additional CSS required.
<div class="top_post_out">
<p>Make me right</p>
</div>
<div class="rankingTableOut">
<p>Make me left</p>
</div>
https://jsfiddle.net/Lvoy1dtd/3/
You should also read Understanding floats.
I have a web page which looks like this :
I would like to know if it is possible to have different margin-top value for the 2 outer divs. At the moment, whether I set margin : x% or margin : [value]px both outer div will receive the value from the margin. I would like it to affect only the one I set.
I mention without float because I was having problem with float and margin / width properties, but if you can come up with a proper solution using float, that'll float my boat. :)
Thanks a lot.
I'm a CSS newbie by the way so be easy on me
do you mean something like this ?
JSFIDDLE
html
<div class="container">
<div class="aaa">first</div>
<div class="bbb">second</div>
<div class="ccc">third</div>
</div>
<div class="container">
<div class="aaa">first</div>
<div class="bbb">second</div>
<div class="ccc">third</div>
</div>
css
div:not(.container){
margin: 10px 20px 30px 20px;
background: white;
height: 100px;
}
.container{
float: left;
background: black;
padding: 20px;
width: 200px;
margin-top: 25px; /*sets both divs same top*/
}
.container:not(:first-child){
margin-left: 50px;
/*margin-top: 25px*/ /*sets only second div or all others down and leaves
the first div like it is. but this for you have to
delete the margin-top entry from .container{ */
}
but actually i would use diffrent classes for this so you can set every div with his own css configuration :)
like:
.myFirstDivContainer{
/* pos data here */
}
.mySecondDivContainer{
/* pos data here */
}
and so on
EDIT
see :not() compabilitys
you can also use :nth-child() like
div.container:nth-child(0){
/* data for your first div */
}
div.container:nth-child(1){
/* data for your second div */
}
and so on...
you can use multiple css classes in the class attribute on an html element:
<div class="outer-div-wrapper">some content</div>
<div class="outer-div-wrapper larger-margin">some content</div>
then put in place some css rules:
/* this will give all divs with class 'outer-div-wrapper' a margin-top of 10px */
.outer-div-wrapper {
margin-top: 10px;
display: inline-block;
margin-right: 10px;
}
/* This will increase the margin size for the divs with the extra 'larger-margin' class */
.outer-div-wrapper.larger-margin {
margin-top: 15px;
}
Something just as good as margin-top in your case might be:
.second-div {
position: relative;
top: 15px;
}
This will move the second div 15px down relative to its default position.
BTW, you should get used to JSFiddle, it's a very good prototyping tool, and far better than making non-interactive drawings :)
Here's your drawing as a fiddle!
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
Not to start a big debate about tables vs css - here goes
I have a two column layout I want to achieve as you can see here:
http://jsfiddle.net/p5S5J/1/ (not to scale)
Here is my attempt at getting layout to work with DIVs
http://jsfiddle.net/xyt2r/1/
Basically, is there a way to have that second DIV automatically fill up the rest of the space in it's (fixed width) parent container without having to specify a width for it?
UPDATE
#thirtydot came up with this (I edited a bit): http://jsfiddle.net/thirtydot/xyt2r/5/
It seems that overflow: hidden on the second DIV keeps the border. I'll have to look at this closer since there seems to be some weird margin action in Chrome and I'm not convinced this isn't Voodoo yet. Anyone care to explain why/how this works?
So, I'm making a proper answer out of my comment. I've improved the CSS slightly.
See: http://jsfiddle.net/2WUgK/
I'm not convinced this isn't Voodoo yet
This will work in IE7+ and all modern browsers. The voodoo is thoroughly explained here :)
HTML:
<div id="my-container">
<div id="column-1" class="layout">Hi!</div>
<div id="column-2" class="layout">Hello</div>
</div>
CSS:
#my-container {
width: 200px;
border: 1px solid red;
padding: 6px 6px 6px 0;
}
#column-1 {
margin: 0 6px;
padding: 6px;
width: 60px;
float: left;
}
#column-2 {
padding: 6px;
overflow: hidden;
}
.layout {
border: 1px solid blue;
height: 120px;
}
I have created the layout you were looking for. Simple use of Float, and Clear (css elements) http://jsfiddle.net/louis002/ZWGfQ/10/
I prefer using tables since it seems to be more cross browser friendly.
But I hear you, so what i've done when i use div tags is "float" the left column left and float the right column right
<div style="float:left;">left column</div>
<div style="float:right:">right column</div>
I've had better luck with this than specifying widths since some browsers may not display it right or if i have dynamic data inside of it and it shifts, boom! your page is now all out of sorts.