This is driving me crazy. I am relatively new to this stuff so trying to figure this one out for the past hour. I'll be really thankful if someone can help me with this.
I have the following code:
<div class="middle_box">
<div class="box left">
Some large text
</div>
<div class="box right">
Some large text as well
</div>
</div>
CSS:
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
}
.box {
float: left;
font-size: 21px;
margin-right: 50px;
margin-top: 25px;
padding-top: 25px;
width: 390px;
}
As you can tell the width of the container is 960px. Now, I want to center the two .box elements within the 960px container and that's where I am lost.
What did I try?
I tried using margin: 0px auto; and I tried faking it by adding margin-left on both sides but it just didn't work. How can I achieve this?
You need to clear ".middle_box", as its children elements are floated.
.middle_box:before, .middle_box:after {
content: "";
display: table;
}
.middle_box:after { clear: both; }
should do the trick
best way to use this hack calls clearfix :
.middle_box:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
When you are using fixed widths anyway, 960px and 390px, why not set the margin as well? Easy to calculate, no need for advanced CSS "magic" here in such setup.
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
background-color: red;
}
.box {
float: left;
font-size: 21px;
margin-left: 60px; /* <--- */
margin-top: 25px;
padding-top: 25px;
width: 390px;
background-color: yellow;
}
Here's a Fiddle
HTML
With floating - different dimensions
<div class="middle_box">
<div class="box0 left">
Some large text
</div>
<div class="box0 right">
Some large text as well
</div>
</div>
Without floating - same dimensions
<div class="middle_box">
<div class="box1">
Some large text
</div>
<div class="box1">
Some large text as well
</div>
</div>
With clear - one on the top of another
<div class="middle_box">
<div class="box2 clear">
Some large text
</div>
<div class="box2 clear">
Some large text as well
</div>
</div>
CSS
.middle_box {
margin: 0 auto 10px;
width: 960px;
height: 260px;
text-align: center;
text-transform: uppercase;
border: 1px solid #333;
}
.box0 {
font-size: 21px;
padding-top: 25px;
height: 65px;
border: 1px solid #333;
}
.left {
float: left;
width: 585px;
margin: 24px 6px 0 24px;
}
.right {
float: right;
width: 300px;
margin: 24px 24px 0 6px;
}
.box1 {
float: left;
font-size: 21px;
margin-top: 25px;
margin-left: 25px; /* margin-left | calculate 960px - boxes width - borders */
padding-top: 25px;
height: 65px;
width: 438px;
border: 1px solid #333;
}
.box2 {
font-size: 21px;
margin: 25px auto 25px;
padding-top: 25px;
width: 442px;
height: 65px;
border: 1px solid #333;
}
.clear {
clear: both;
}
Centring floats is tough, but do you need to use float? Why not use:
display: inline-block
There are advantages/disadvantages to using both float and inline-block and both have their quirks but ultimately I find inline-block much more useful and easier to develop with. Here is a fiddle for the solution to your problem using inline-block
DEMO FIDDLE
Also a heads up about its white-space quirk if you do use it (but an easy one to fix):
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
The first two align perfectly, but the third one just won't. .. Can anyone here tell me what i'm doing wrong? I was stuck at this for hours last night, and this morning, by looking at other similar questions here, I was able to get the first two divs to align, but the third one won't no matter what. There is an entirely different div below it that it keeps going inside of instead of going up to align itself with the other two.
HTML & CSS
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
float: left;
width: 300px;
height: 300px;
background-color: white;
margin-left: 40px;
margin-right: 5px;
}
.frame2 {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: white;
}
.frame3 {
width: 30%;
height: 300px;
background-color: white;
margin-left: 5px;
margin-right: 40px;
float: right;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>
First. Set them all to float left, so the will try to pack left until they fill the page width.
If you set some of the widths percentually and other in absolute numbers, your design wont work for all screen sizes. You'll have to do a lot of math. I suggest you use all widths percentual, so they will behave in all screens.
In your case, they would align to the top only in screens where the width of all elements together isn't greater than the width of the screen.
I changed the background colors so we could see better.
obs: If you know the min screen size this has to work, you can use absolute numbers. You'll have to make the divs with their margins fit on the smallest considered screen size.
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
background-color: yellow;
float: left;
width: 33%;
height: 300px;
// margin-left: 40px;
// margin-right: 5px;
}
.frame2 {
background-color: blue;
float: left;
margin: 0 auto;
width: 33%;
height: 300px;
}
.frame3 {
background-color: green;
width: 33%;
height: 300px;
// margin-left: 5px;
// margin-right: 40px;
float: left;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>
I have a p element inside two circles with borders and need to center the p element based on the width of the circles however I want to cause the p element to break into two lines without needing to create two p elements so I used a max-width. I believe that this is causing it not to center, but I could be wrong. If anyone knows a good hack to get around this please enlighten me
DEMO
<div class="one">
<div class="two">
<p class="survive">Surviving Earth</p>
</div>
</div>
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
}
.survive {
font-size: 36px;
max-width: 100px;
}
Your 100px wide <p> is block-level, so it will not follow the inline text-align: center rule. You need to give it an automatic left-right margin to put it in the horizontal center:
.survive {
font-size: 36px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
}
Once you do this, you'll notice it sits a bit too far to the right. That's because your first word is wider than the 100px limit (I measure about 140px) and the browser will not wrap inside a word.
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
}
.survive {
font-size: 36px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
text-align: center;
}
<div class="one">
<div class="two">
<p class="survive">Surviving Earth</p>
</div>
</div>
I apologize if this is a basic question, but i'm having trouble centering four divs. All four green divs have a float left, then there is a wrapper div (blue). I want to center the four divs but have them aligned like this (On a larger resolution they are not displayed along the middle). So that when reducing the screen size the divs will float underneath each other.
http://jsfiddle.net/qvu712tj/
#blog-wrapper {
background-color: blue;
width: 100%;
height: 700px;
margin-left: auto;
margin-right: auto;
align: center;
}
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px;
float: left;
padding: 5px;
}
<div id="blog-wrapper">
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
</div>
I hope this makes sense please could anyone help?
Try this:
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px 2.5%;
float: left;
/* padding: 5px; */
}
use percentage instead of px for margin and padding
.blog-section{
background-color: green;
height: 200px;
width: 45%;
margin: 1%;
float: left;
padding: 1.5%;
}
Try this
.blog-section{
background-color: green;
height: 200px;
width: 48%;
margin: 12px 1%;
float: left;
}
I'm having problems making my site look good in Firefox. I have a div and then two divs inside the first one and I want the two that are inside two be side by side. This is the HTML:
<div class="gluggi3">
<h2 class="aust">Veðurspá</h2>
<div class="vedurspa">Some content</div>
<div id="map-canvas">More content</div>
</div>
and then the CSS:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border: solid;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
display: block;
width: 50%;
float: left;
padding-right: 50px;
}
#map-canvas {
height: 300px;
width: 300px;
margin: 0px;
padding: 0px;
display: block;
}
This code works fine in Chrome but not in Firefox, in Firefox the div with the class 'vedurspa' dissappears. I tried using inline, inline-block and initialising left like suggested in other questions, but still no luck. Can anyone tell me how I can make them stay side by side in Firefox? Thanks in advance!
you have a padding-right: 50px; on .vedurspa, therefor they are not side by side, removing that would solve your problem
It's not a FireFox issue. When the viewport is to narrow, #map-canvas will start wrapping.
Consider this:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
width: 50%;
padding-right: 50px;
float: left;
}
#map-canvas {
height: 300px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
}
Fiddle: http://jsfiddle.net/vUvhq/
Also, remove your comma in the first .gluggi3 class
.gluggi3,{}
to
.gluggi3{}
I'm assuming you added the padding-right to .verdurspa so there would be space between the blocks.
Try adding float: right; to #map-canvas
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/