http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
Related
All 3 containers that you see in the attached file are inside one main container. I used "float: left" for the 1st two containers and "clear: both" property to the 3rd.
But, it seems like after applying "clear" property to the third container, margin-top isn't working.
Please help me with the following questions :
Why is this happening?
How can I fix this?
Thanks!
Code :
div#insideContainer1
{
max-width: 500px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #e0e0e0;
border-radius: 5px;
float: left;
}
div#insideContainer2
{
max-width: 500px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #e0e0e0;
border-radius: 5px;
margin-left: 20px;
float: left;
}
div#insideContainer3
{
max-width: 500px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #e0e0e0;
border-radius: 5px;
margin-top: 30px;
clear: both;
}
CSS Output Screenshot
CSS Code Screenshot
Alright then,
1- When clear: both; a div, you clear what's beside it on left and right, so div#3 clear is doing nothing...
(for example: if you give both div#1 and div#2 clear: both; each div will take it's own block and it ruin the float: left;
2- To break the float in this case, you don't need clear" both; in any of these divs, it'll be a div itself to clear and sperate!
3- Since the divs has the same CSS style, we should select all at once (read more: CSS Selector Reference).
HTML:
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="clear-both"></div>
<div class="div3"></div>
</div>
CSS:
.div1,
.div2,
.div3{
width: 500px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #e0e0e0;
border-radius: 5px;
background-color: #f40b0b;
margin: 10px;
}
.div1, .div2 {
float: left;
}
.div3 {
background-color: aqua;
}
.clear-both {
clear: both;
}
I'd like to create an outer DIV, which contains several inner DIVs. At the moment, this works perfect.
But I have some troubles with the margin of the outer div. If the outer DIV has a fixed height (f.ex. height: 100px;), there will be a margin at the bottom. But if I set the height to auto (it should have only the height of all inner DIVs), the margin-bottom disappears.
Example:
Here, the margin-bottom applies normaly. The height of the outer-box is set to a fixed height:
https://jsfiddle.net/v81mehc5/3/
But changing the height of the outer DIV from a fixed height (75px) to auto, the margin-bottom of 40px disappears.
https://jsfiddle.net/v81mehc5/2/
What's missing in the second case? What's wrong overthere?
HTML
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
CSS
.outer-box
{
width: 200px;
height: 75px; /*if height: auto > no margin-bottom will be applied*/
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
Thank you very much for your help.
Nothing is missing but you are using floating elements inside the outer div. So height:auto means height:0 in you case so you are only seeing the margin-bottom (that you thought it's the height).
In order to fix this you need to add overflow:hidden to outer div.
.outer-box
{
width: 200px;
height: auto;
overflow:auto;
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
More questions related to the same issue for more details :
Why does overflow hidden stop floating elements escaping their container?
CSS overflow:hidden with floats
Floating elements collapse their container. You'll see that if you apply a border to it:
<div style="border: 1px solid #666; margin-bottom: 40px;">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
You can use a clearing technique to get around this as a possible solution that works in IE8 and up:
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div style="border: 1px solid #666; margin-bottom: 40px;" class="clearfix">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I'm a real beginner in CSS...
Do you know how could I do this sort of alignment ? I try a lot a things but I don't get what I need... So I just draw it if you have any code idea...
<div id="sys-wrap">
<img src="image.png">
<p>Long message texte</p>
</div>
#sys-wrap {}
#sys-wrap p {
border: 1px solid #ffffff;
float:left;
margin: 15px;
width: 691px;
}
#sys-wrap img {
border: 1px solid #ffffff;
float: left;
margin: 15px 15px 15px 100px;
vertical-align: top;
}
Thanks!
(source: imgsafe.org)
I made a fiddle. Does this work for you?
https://jsfiddle.net/hnf8jou4/3/
HTML:
<div>
<div id="left">
<img src="http://lorempixel.com/400/200" id="inner">
</div>
<div id="right"></div>
</div>
CSS:
#left {
width:25%;
height:200px;
float: left;
background-color:#f00;
}
#right {
width:75%;
height:200px;
background-color:#0f0;
}
#inner {
display:block;
width:100px;
margin-left: auto;
margin-right: 0;
background-color: #00f;
}
It is really unclear what exactly you are trying to achieve. But since i saw the drawing u made i suppose this is what u need. U need to have a div for wrap and add float: right to the right div. The other things are just playing with height in % and paddings.
https://jsfiddle.net/hnf8jou4/4/
For #sys-wrap img inside of your CSS file, add a float: right; and a margin of 15px
Your new CSS should look similar to this:
#sys-wrap img {
width: 50px;
height: 50px;
border: 1px solid #ffffff;
float: right;
margin: 15px;
}
Also, give it's parent container a set width and height:
#sys-wrap {
width: 150px;
height: 150px;
background: red; // just to make it pretty
}
And just as a little fyi, vertical-align does not work, unless the specified element has a display of table-cell. :-)
Here's a fiddle: https://jsfiddle.net/d2ae3ub3/
I am bad at integration its crasy. I float a lot of my stuff and find that whenever I start floating something I have to float its container ans its containers container ad nauseum because otherwise the container is collapsed.
So looking at my site now its pretty nice a stable but if I put a border on body I see that it is 1px high on top and everything in body is outside. If I float body then everything looks good but:
1- Is that bad design and how should I do it?
2- If its ok how do I center body? I use margin: auto. But once body is floated it stops working.
This is my css.
body {
width: 960px;
font-size: 13px;
margin: auto;
margin-top: 20px;
border: 1px #000 solid;
}
.wrapper {
float: left;
width: 960px;
}
.header {
float: left;
width: 960px;
border: 1px #000 solid;
margin-bottom: 20px;
}
.menu {
width: 960px;
float: left;
border: 1px #000 solid;
}
.sidebar {
width: 260px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.content {
border: 1px #000 solid;
margin-left: 20px;
margin-top: 20px;
width: 620px;
float: left;
padding: 10px;
}
.footer {
border: 1px #000 solid;
width: 960px;
float: left;
margin-top: 20px;
}
And the layout file:
<body>
<div class="wrapper">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div class="sidebar">
sidebar
</div>
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
Anyways hope I am clear.
Replace the float with overflow: auto in .wrapper and it should work just fine. You can then center it with margin: auto:
.wrapper {
overflow: auto;
margin: auto;
width: 960px;
}
Also, remove width: 960px and margin: auto from body as you don't need them anymore.
If you set your container's overflow to auto or hidden you shouldn't have to float it too (unless you want to for other reasons). Such as:
<div id="container">
<div id="left">Content! this should be floated left</div>
</div>
#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }
Should have the container display with the border around everything.
Yes, floating all the elements like that is bad design and an abuse of the float element. It would be well worth your while to learn the natural flow of the elements and proper use of CSS position.