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>
Related
For some reason my (html) is not rendering proprely I have to push table#footer to the bottom. I have situation like this:
<div id="container">
<table id="footer"></table>
<div id="text"></div>
</div>
Is it possible in css to push first child element to the bottom without position absolute?
I need to keep table just after div#text.
Consider flebox and order like this:
#container {
height:80vh;
border:1px solid;
display:flex;
flex-direction:column;
}
#footer {
order:1;
margin-top:auto;
border:1px solid green;
height:20px;
width:100%;
}
#text {
border:1px solid orange;
height:20px;
}
<div id="container">
<table id="footer"></table>
<div id="text"> text</div>
</div>
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
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/
As you can see from the code i'm using clear:both to allow me to place #three under #one #two but this seems to be stopping me from adding margin-top to #three is there a fix for this?
<div id="one">
</div>
<div id="two">
</div>
<div id="three" class="clearfix">
</div>
#one {
float:left;
}
#two {
float:right;
}
.clearfix {
clear:both;
}
#three {
margin-top: 20px;
}
As a workaround you may use
padding-top : 20px
or you may also technically use
position: relative;
top: 20px;
applied on #three div. Or even
padding-bottom: 20px;
applied on #two div. And even
#two:after {
content : "";
clear : both;
display : block;
height : 20px; // or margin-bottom: 20px;
}
Just choose the option that fits best for your layout
Apply float:left; to #three to fix your issue
Edit: Or follow Fabrizio and add padding if you don't want to float anything, but no need to use relative positioning.
Wrap #one and #two in a container with overflow:hidden;, and you won't even need the clearfix.
Demo
<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
#container {
overflow:hidden;
}
#one {
float:left;
}
#two {
float:right;
}
#three {
margin-top: 20px;
}
Hi now change some code in you html and do this
<div style='overflow:hidden'>
<div id="one">Left</div>
<div id="two">Right</div>
</div>
<div id="three" class="clearfix">// your data </div>
Live Demo
This JSFiddle should help you
<div class="row">
<div id="one">
a
</div>
<div id="two">
b
</div>
</div>
<div id="three">
c
</div>
CSS
#one {
float:left;
}
#two {
float:right;
}
clearfix {
clear:both;
}
.row{ overflow: hidden; border: 1px solid red; }
#three {
margin-top: 40px; border: 1px solid green;
}
You need to apply the clear: both; to the #three div.
Then it will be like this: http://jsfiddle.net/uJBK2/
EDIT
Now I see you're just missing a point before clearfix. Nevermind.
Hi I want to achieve the following:
The following code works but I'm not sure if position: absolute for left upper "Name" is the wise way to do it or should I use float ?
Here is the html
<div class="bodyframe">
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
And the css
![.bodyframe {
}
.upperbodyframe{
}
#leftupperbodyframe{
text-align:left;
border: 1px solid ;
position: absolute;
}
#rightupperbodyframe{
text-align: right;
}]
i would use floats here. there's really no reason for the position:absolute here as well.
.upperbodyframe {overflow:hidden} /* or div will collapse with only floated elements inside */
#leftupperbodyframe {float:left; border: 1px solid ;}
#rightupperbodyframe {float:right;}
You can do this with two method.
First Method
.upperbodyframe{
width:100%;
position:absolute;
}
#leftupperbodyframe{
position: absolute;
left:0px;
}
#rightupperbodyframe{
position: absolute;
right:0px;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Second Method
.upperbodyframe{
width:100%;
}
#leftupperbodyframe{
float:left;
}
#rightupperbodyframe{
float:right;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Thanks,Arun Krishnan