I found that when I mix floated and nonfloated divs, margin of unfloated div is missing.
HTML
<div class="d0 d1">
Left
</div>
<div class="d0 d2">
Right
</div>
<div class="d0 d3">
Center
</div>
CSS
.d0 {
height: 100px;
border: 1px solid #333;
}
.d1 {
float: left;
width: 100px;
}
.d2 {
float: right;
width: 100px;
}
.d3 {
overflow: hidden;
width: auto;
margin: 5px;
}
See this fiddle (5px margin on center div is missing)
http://jsfiddle.net/ozrentk/f5VFc/2/
However, if I add margin to floating elements, then it's really there.
Does someone know why is this happening?
EDIT I updated the fiddle, it was a bit confusing
To understand the problem, look at the margin that should be BETWEEN Center and Left div. Or Center and Right. There is none.
The problem you are running into is that a non floated element will ignore floated elements within the document flow.
The margin is being applied, but since the non floated div does not recognize the floated one, its is relative to the edge of the page and not the floated div.
You can read more about it here: http://spyrestudios.com/css-in-depth-floats-positions/
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 have seen many questions on SO that are similar to this one but i haven't found a solution that fits for my situation.
What i have tried from the solutions i read is to set the height or minimum height of the left column to be equal to the height of the image or right column
via JS / Jquery but somehow it didn't work, i don't know why.
I have a relative positioned parent div which has two child divs (Columns). The first child div (left) is relative positioned and the second child div (right) is absolute positioned. The left child div has some text while the right child div has an image. The parent div's height goes as far as the left child div's height and it doesn't show most part of an image that's in the right child div.
How can i make the parent div expand to the height that's equal to the image inside the right child div.
The layout is extremely important so i can't change it. Both Css and JS / jQuery is welcomed.
HTML
<div class="parent" id="parent">
<div class="leftcolumn">This is the left Column</div>
<div class="rightcolumn"><img src="somelinkhere"></div>
</div>
CSS
.leftcolumn
{
width: 25%;
position: relative;
}
.rightcolumn
{
width: 75%;
position: absolute;
right: 25%;
}
For what you are actually trying to achieve, using absolute positioning is probably the least flexible ways.
If you are using a grid system I suggest you use it, but below is a HTML & CSS only "quickfix" using floats.
img {
width: 25%;
/* for testing so we can see where image would be */
height: 50px; background: #ccc;
}
.textcolumn {
width: 75%;
}
.container {
margin-bottom: 20px;
}
/* clearfix to make each container fully contain its floated elements */
.container:after {
content: "";
display: table;
clear: both;
}
/* alternate the display between odd & even containers */
.container:nth-child(odd) img{ float: right; }
.container:nth-child(odd) .textcolumn { float: left;}
.container:nth-child(even) img{ float: left;}
.container:nth-child(even) .textcolumn{ float: right; }
<div class="container">
<div class="textcolumn">This is the text block that will float to the left </div>
<img src="somelinkhere">
</div>
<div class="container">
<div class="textcolumn">This is the text block that will float to the right</div>
<img src="somelinkhere">
</div>
I'm trying to figure out how to center more than one DIV horizontally.
My Code looks like this:
HTML:
<div id="circle">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
CSS:
#circle {
text-align: center;
}
#circle1 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
#circle2 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
They do center horizontally but there's a break between the circles and I have no clue how to get them in a straight horizontal line.
I googled already, but didn't found anything that works..
You can add display:inline-block; to both #circle1 and #circle2
Also, thee is no need for margin: 0 auto; on both div's since you have text-align:center; in your wrapper.
JSFiddle Demo
You shouldn't use display: inline-block to center elements like divs due to how whitespace in the HTML document will affect the styling.
This jsFiddle outlines the differences. imbondbaby's inline-block divs have a small amount of whitespace between them that can only be removed by eliminating whitespace in your markup. This can be diffcult to diagnose and debug, and has bitten me before.
Instead, center the container of the divs using margin: 0 auto. Then float: left the divs inside their parent to place them next to each other, and apply a clearfix to the container.
Style:
#wrapper {
margin: 0 auto;
}
.clearfix {
display: table;
clear: both;
}
.circle {
float: left;
}
HTML
<div id="wrapper" class="clearfix">
<div class="circle"></div>
<div class="circle"></div>
</div>
If I've understood your question correctly, you want the two circles to be on the same line, centered within the wrapper circle div.
Basically, you could float one circle to the left, and the other to the right to get them on the same line. Then to adjust how close they are together within the wrapper div, you could adjust the width property of the wrapper div with a percentage (which in this case is relative to the div's parent, the body).
Here's an example of a potential solution: http://jsfiddle.net/UFN5S/
By the way, there are other similar questions to this already on SO. I know you've said you googled, but usually with questions like this one there has already been asked and answered on SO.
i.e.:
How to center two divs floating next to one another
or
Aligning two divs side by side center to page using percentage width
Hope that helps!
Horizontally aligning a div-element within another div-element can be achived with margin: 0 auto; as long as they both have a width-property other than auto, but this does not apply for vertical alignment.
How can you vertically align a div within another div?
There are a number of different approaches to this, based on various ideas. Given that the element has a fixed height (in px, % or what have you), the best solution I've found so far is based on the following principle:
Give the parent div position: relative; and the child div position: absolute;, to make the child absolutley positioned in relation to the parent.
For the child, set top, bottom, left and right to 0. Given that the child also has a fixed width and height that is less than the size of the parent, this will push the browser into an impossible situation.
In comes margin: auto; on the child, as the browsers savior. The browser can now add enough margin on all sides to let the child-element keep its size, yet still fill out the entire parent as forced by top, bottom, left and right set to 0.
TADAAA! The element gets vertically and horizontally aligned within the parent.
Markup
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
A working example
http://jsfiddle.net/sg3Gw/
I find it easiest to use display:table-cell; vertical-align:middle; here's a jsfiddle
<style>
.a {
border:1px solid red;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
}
</style>
<div class="a">
<div>CENTERED</div>
</div>
I have a page with a float: right'ed div at the top, and a text-align: center'ed div right underneath it. Is it possible to make the floated div not alter the flow of the other div (the one right below it)?
Here are two fiddles that show what I'm seeing (I like neither, they are explained in the next paragraph):
off-center -> http://jsfiddle.net/5XMVt/
centered but gaping hole -> http://jsfiddle.net/CSGQn/
If left alone, the bottom div is pushed left (out of the center) by the floated div. I could do clear: both on the bottom div but that would push it down below the floated div, and even though this is better than being off-center, it's suboptimal because it creates a giant hole right above it. I need the floated div not to alter the flow of the div below it at all, like it's not even there.
I was also thinking about doing position: absolute; but that would only work if the div were supposed to be on the left side, when it's supposed to be on the right side.
What I would like is like the first fiddle except with the 'should be centered' text actually centered.
You can set the right-floated div with position:absolute
And set the right:0, that will give it the same behavior as floating it to the right.
Note that this will only work if the div has to be at the right of the page, not a container.
i think you can do it this way http://jsfiddle.net/5XMVt/4/
or you can use position absolute for the .floating class, and set the right:0px
Yes, why not you have something like that:
<div id="container">
<div id="rightFloat"> you right floated here</div>
<div id="content"> your text here</div>
</div>
With the following style:
#container {
}
#rightFloat {
float: right;
width: 200px;
height: 200px;
border: 1px solid black;
margin-right: 10px;
}
#content {
border: 1px solid black;
float: right;
clear: none;
margin-right: 10px;
}
That ought to do it :)