Why aren't the two boxes floating side-by-side in the following code?
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background: purple;
float:left;
}
.box2{
width: 300px;
height: 300px;
background: yellow;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
jsFiddle describing question.
The float css property removes the element from the regular flow of the page. This means that its position will not be affected by other elements (which are not also floating). For this reason, in your example, the two elements end up on top of each other.
If you assign .box2 the property float:left as well, they will sit next to each other, as I believe you are expecting.
Just a Small Change:
.box2{
width: 300px;
height: 300px;
background: yellow;
float:left;
}
Working Fiddle
The answer given by Will and Jatin are correct but you can also try wrapping both the div`s in a single wrapper div and display both the divs in the same line
Example:
.container
{
display:inline-block;
}
.box1{
width:50px;
height:200px;
background: purple;
float:left;
}
.box2{
width: 50px;
height:200px;
background: yellow;
float:right;
}
JSFiddle
You need to do two things:
1) Wrap the two boxes in a div
2) Add float:left to both the boxes
In this way you need not clear the float for subsequent containers
Related
I have two divs next to each other. The div on the right is 300px x 335px. The div on the left goes all the way down the page. I want the width of the left div to go all the way until the right div. Then under the right div, it takes up the whole width of the page. Is this possible?
div elements are block level elements. So they are like square blocks. No, they can't work as you ask. However, you might Google for CSS Shapes to see if it can do what you wish but it's not available in all browsers and still isn't exactly the same as you request.
Here is some option either you can add min-width to the short div and long div to extend it. or you can add a background-color body to fake the illusion of it. but like Rob said there is no good way that can work out.
.short {
width: 100px; height: 100px;
background:red;
float:left;
//min-height: 500px;
}
.long {
width: 100px; height: 500px;
background:blue;
float:left;
//min-height: 500px;
}
.width {
width: 100%;
height: 200px;
background:yellow;
}
.clearfix {
overflow: auto;
zoom: 1;
}
body {
// background-color: red;
}
<div class="clearfix">
<div class="short"></div>
<div class="long"></div>
</div>
<div class="width"></div>
That is not possible, although you could always put another div under the one on the right and set the margin so that it looks like it's part of the one on the left.
This is one of the method to achieve what you want
CSS
#left1 {
margin-right: 300px;
height: 335px;
background: #aaa;
}
#right {
width: 300px;
height: 335px;
float: right;
}
#left2 {
background: #aaa;
border: 1px soild #000;
min-height: 300px;
}
<div id="right"></div>
<div id="left1"></div>
<div id="left2"></div>
I have this simple HTML code (I can't modify it, no divs in a div) :
<div id="container">
<div id="a">
Title col
</div>
<div id="b">
Left col
</div>
<div id="c">
Right col
</div>
</div>
It comes with this CSS code (I can only add rules, I can't delete code) :
#container {
width: 100%;
}
#a {
width: 400px;
margin: auto;
}
#b {
width: 300px;
float: left;
}
#c {
width: 100px;
float: left;
}
"b" and "c" div's are not horizontally centered, you can have a look at the result here : http://jsfiddle.net/x5qKN/
I want to horizontally center that two divs. I think it's easy, but I dont know how to do this. I tried different answers from this post : "How to horizontally center a <div> in another <div>?", but it does not solves the problem. Is there a solution ?
Thanks a lot (I hope it's not a duplicate post)
Sure, the trick is to not float, but display:inline-block the last two items, whilst setting text-align:center on the parent container. Setting the font size to zero then back means the items dont then have a space between them.
Demo Fiddle
div {
font-size:14px;
box-sizing:border-box;
}
#container {
width: 100%;
text-align:center;
font-size:0;
}
div:not(#container) {
text-align:left;
}
#a {
width: 400px;
border:1px solid black;
margin: auto;
}
#b {
width: 300px;
display:inline-block;
border:1px solid black;
}
#c {
width: 100px;
display:inline-block;
border:1px solid black;
}
Here is the failed jsfiddle link. I want to have the buttonCenter div located in the black box in the following image:
How do I have to change the css class for buttonCenter:
#buttonCenter {
width: 250px;
height: 100px;
margin-right:auto;
margin-left:auto;
margin-top:100px;
background-color:gray;
}
Thanks in advance,
You will need position: relative; and add z-index (Just for a safer side) as well..
#buttonCenter {
width: 250px;
height: 100px;
margin-right:auto;
margin-left:auto;
margin-top:100px;
background-color:gray;
border: 1px solid #000;
z-index: 1;
position: relative;
}
Demo
Though would like to tell you that the positioning is just weird, you are floating the elements for no good reasons.
For example, you are applying float: left; for #row1, #row2 and #buttonsContainer which isn't required as they take up entire horizontal space.
Don't use id to identify each element, better use classes, so that you can share a common class between elements holding common styles, because you cannot use same id on a single document, they should be unique.
Also, you are using huge margins, consider using position: absolute; instead
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.
I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem
Demo: http://jsfiddle.net/a5hP3/
Here's code anyway:
HTML:
<div class="box">
put it down, in center of box
</div>
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
}
.box a{
vertical-align:middle; //doesnt work
}
You can set the line-height equal to the height:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
line-height: 300px;
}
http://jsfiddle.net/a5hP3/3
There are two solutions:
First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.
Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:
<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
Some Text
</div>
SEE DEMO
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
position:relative;
}
.box a{
display:block;
position:absolute;
top:45%;
left:10% /* adjust based on link width */
}
Make the line-height the same as the container height...
http://jsfiddle.net/a5hP3/1/
Note: This solution only works when there is one line of text.
This is a problem better handled by javascript. (I'm using jQuery here):
http://jsfiddle.net/a5hP3/15/