Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.
However if I use float:left and float:right twice, I get the following:
ELEMENT ELEMENT
ELEMENT ELEMENT
rather than
ELEMENT ELEMENT
ELEMENT ELEMENT
This is because, when I float for the second time the css floats for the remaining space left.
How do I fix this bug?
You can use clear:both; with float:left; property.
Try Jsbin demo
.left {
float:left;
width:40%;
height:240px;
border:1px solid red;
}
.right {
float:right;
width:40%;
border:1px solid red;
height:240px;
}
.elem1 {
float:left;
margin-bottom:20px;
}
.elem2 {
float:left;
clear:both;
}
.elem3 {
float:left;
margin-bottom:20px;
}
.elem4 {
float:left;
clear:both;
}
<div class="left">
<div class="elem1">element 1</div>
<div class="elem2">element 2</div>
</div>
<div class="right">
<div class="elem3">element3</div>
<div class="elem4">element4</div>
</div>
What you need is a clear: both in your CSS.
Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.
Try this one:
Markup:
<div class='clear:both'>
<!-- left container -->
<div style = "float:left;">
<div style = "float:left;">
Element
</div>
<div style = "float:left; clear:left;">
Element
</div>
</div>
<!-- right container -->
<div style = "float:right">
<div style = "float:right;">
Element
</div>
<div style = "float:right; clear:right;">
Element
</div>
</div>
Please use your own external style, this is just to guide you.
Please have a look here on jsfiddle
.wrapper {
height:100px;
border:1px solid red;
margin: 5px;
}
.left {
margin: 10px;
float:left;
width: 45%;
}
.right {
margin: 10px;
float:right;
width: 45%;
}
<div class="wrapper">
<div class="left">element 1</div>
<div class="right">element 2</div>
</div>
<div class="wrapper">
<div class="left">element3</div>
<div class="right">element4</div>
</div>
This works for me.
.right {
float:right;
}
.left {
float:left;
}
<div>
<div class="right">1 element</div>
<div style="clear:both"></div>
<div class="right">1 element</div>
<div class="left">1 element</div>
<div style="clear:both"></div>
<div class="left">1 element</div>
</div>
Here is the fiddle. http://jsfiddle.net/nQvEW/143/
Related
I am having difficulties in understanding the nature of table and table-cell when used in css.
Consider the following: http://jsfiddle.net/dd7h7/3/.
HTML
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
CSS
.widget {
display:block;
margin:0px;
padding:0px;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
}
.content {
display:table;
width:100%;
height:100%;
margin:0px;
padding:0px;
border-spacing:0;
border-collapse:collapse;
}
.icon {
display:table-cell;
width:15px;
height:15px;
margin:0px;
padding:0px;
vertical-align:middle;
text-align:center;
}
.label {
display:table-cell;
margin:0px;
padding:0px;
padding-left:3px;
vertical-align:middle;
}
Im trying to make a widget containing some buttons, that are positioned alongside each other. But I don't understand where the space between the red boxes comes from. How do I get rid of it?
Thanks
Inline elements (in your case the .button divs) are sensitive to white space, you can get rid of that space in a variety of ways, including:
Removing the space between the elements
Using HTML comments (<!-- -->) to occupy the gap
Floating the elements left
Example of removing the white space between elements:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using HTML comments:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using float:
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float:left;
}
jsFiddle example
So in short this really doesn't have to do with display:table-cell but everything to do with display:inline and inline-block.
in this fiddle i removed the space simply using
float:left;
http://jsfiddle.net/dd7h7/5/
inline-block is adding that unnecessary space.
You can do a little trick with font size:
.widget {
display:block;
margin:0px;
padding:0px;
font-size: 0;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
font-size: initial;
}
I think you should add
float:left
to
.button
so CSS should be like this
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float: left;
}
Hope, that will help. :)
I'm having trouble in aligning divs in my project. I'm expecting something like this:
but what i've done so far is like this one:
All divs have class "inline"
CSS:
div.inline{
float: left;
}
Thanks in advance.
why not something like this?
just a little adjustment to deepus code: though the width of the parent and children must be set to your standards
<html>
<head>
</head>
<style>
.inline
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
float:left;
margin:2px;
}
.main
{
width:120px;
}
</style>
</head>
<body >
<div class="main">
<div class="inline">div 1</div>
<div class="inline">div 2</div>
<div class="inline">div 3</div>
<div class="inline">div 4</div>
</div>
</body>
</html>
Simple:
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 4px;
}
div:nth-child(odd) {
clear: left;
}
See this fiddle: http://jsfiddle.net/QkruA/
go to old school way...clear:both
demo
css
div.inline{
float: left;
width:200px;
height:200px;
border:1px solid #000;
}
.clr{
clear:both;
}
html
<div class="inline"></div>
<div class="inline"></div>
<div class="clr"></div> <!-- taa daa...i love old schools methods :) -->
<div class="inline"></div>
<div class="inline"></div>
why don't you just use display:inline-block on each div
To make it easy for you for in the future add a class "left" and "right"
In this way you only have to make 2 very little css codes and you can use it every time you want something to set left or right (so you dont need to type this again every time you want to use it)
CSS code
.left
{
float:left;
}
.right
{
float:right;
}
.box
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
margin:2px;
}
.main
{
width:120px;
}
HTML code
<body >
<div class="main">
<div class="left box">div 1</div>
<div class="right box">div 2</div>
<div class="left box">div 3</div>
<div class="right box">div 4</div>
</div>
</body>
I'm trying to align a few divs into this structure but nothing is working.
<div>
<div>top</div>
<div>middle
<div>left</div> <div>right</div>
</div>
<div>bottom</div>
</div>
Ive tried using floats with abosolutes, blocks, etc closest im getting is with block-inline but the div which i need aligned right just sits up close to the left div,ived add text-align right with no joy.
Many Thanks
D
try this
<div>
<div>top</div>
<div>
<div style="float:left;">left</div>
<div style="float:left;">right</div>
</div>
<div style="clear:both;">bottom</div>
</div>
the bottom div with clear:both is probably not enough but does the trick in this particular example
google clearfix for this
Give the left and right div a width and let them float
Make sure you also clear the float by adding an extra div below with: clear: both;
Code:
<div id="wrap">
<div id="top">top</div>
<div id="mid">
<div id="left">left</div>
<div id="right">right</div>
<div class="clear"></div>
</div>
<div id="bot">bottom</div>
</div>
CSS:
div {
background: #ccc;
height: 15px;
margin-bottom: 10px;
}
.clear {
clear: both;
}
#wrap {
width: 400px;
}
#top {
}
#mid {
}
#left {
float: left;
width: 200px;
}
#right {
float: left;
width: 200px;
}
#bot {
}
See code in action: http://jsfiddle.net/GZg6y/
you can do this in different ways, one through float css property, make sure you specify the width as in this example:
<div class="container">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div> <div class="right">right</div>
</div>
<div class="bottom">bottom</div>
and your css should look like this:
.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}
see here http://jsfiddle.net/M3met/1/
I have a div that contains inside 3 'floated' divs. The containing div has a line of text. The three floating inner divs also have a line of text.
When I specify text-align center for the outermost containing div, the three nested divs appear first, on one row next to each other left-to-right, and THEN the containing div's text appears to the right of the contained divs, centered in the space to the right of them.
Instead, I don't understand why the outermost containing div's text will not appear centered in the browser window, then below that the 3 contained divs and their text would appear. That's what I need to happen.
Here is the code. By the way I tried to embed a .jpg image into this question so you can see the problem -- anyone know how to display a screenshot or .jpg into a question here?
<head>
<style>
#myRowStyles
{
text-align:center;
margin-bottom:100px;
background-color:#b0e0e6;
border: 1px solid red;
}
#leftSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#centerPiece
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#rightSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
</style>
</head>
<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div style="clear:both">
</div>
<div id="myRowStyles"><b>THIS IS ROW #2</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
First you have multiple same ID's on the page. That's bad. Change them to classes.
Second give myRowStyles a width.
I think that to make divs behave like tables you must define the display attributes in CSS:
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
So you will also need to add an extra <div> at the beginning for the container. I haven't tested this.
Also, I dont think you can make a single row span 3 columns when using DIVs so you must do something like this:
<head>
<style>
#container {
width:90%;
float:center;
margin-left:10px;
margin-top:30px;
border: 1px solid blue;
text-align:centre;
display: table;
}
#myRowStyles
{
text-align:center;
background-color:#b0e0e6;
border: 1px solid red;
display: table-row;
}
#leftSide,#centerPiece,#rightSide
{
width:120px;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
display: table-cell;
}
</style>
</head>
<div id="container">
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 1
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 2
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
</div>
Try something like this: http://jsfiddle.net/We74E/2/
I want to float a sidebar div to the right beside two stacked divs, both floated to the right.
You can find the code here:
http://jsfiddle.net/okcomputer82/ED4WJ/2/
I'm sure I can do this by grouping the left divs, but I would like to know if there is a cleaner way.
Thanks.
remove "clear: both;" from css class .left, and it will be ok.
NEW
update class .left to "clear:left;"
.left {
float: left;
clear: left;
background: yellow;
}
and put your right div to be at the first place like below
<div class="content">
<div class="right"></div>
<div class="left"></div>
<div class="left"></div>
</div>
example : http://jsfiddle.net/ED4WJ/5/
<div class="content">
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css
.content
{
Float:left;
width:960px;
height:100px;
}
.left
{
float:left;
width:40%;
height:100%;
background-color:red
}
.right
{
float:left;
width:20%;
height:100%;
background-color:yellow
}