I have a div that floats to right and two child DIVs that also float to right. The issue is that the Second Div always shows up first. I have tried adding clearfix to the parent div which did not work at all. Is there a way to fix this without adding width to the child divs?
<div class="parent-div">
<div class="div1">
Div 1
</div>
<div class="div2">
Div 2
</div>
</div>
.parent-div {
float: right;
margin-left: 0;
flex-grow: 1;
display: inline;
}
.parent-div>* {
float: right;
}
<div class="parent-div">
<div class="div1">
Div 1
</div>
<div class="clearfix">
</div>
<div class="div2">
Div 2
</div>
</div>
.parent-div {
float: right;
margin-left: 0;
flex-grow: 1;
display: inline;
}
.parent-div>* {
float: right;
}
.clearfix{
clear:both;
}
have you added the clearfix at the correct position, this will make the div2 not to respect to the div1 float.
Related
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I have this markup:
<div id="wrapper">
<div id="container">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
and this CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#container {
width: 200%;
}
.block {
width: 50%;
float: left;
}
Basically all I want to do is, have 2 fullwidth divs floating next to each other, but when I put some content in them I get container centered and pieces of both divs showing, like this: http://prntscr.com/8lr4l6
What am I doing wrong?
There is no need to set the width of the wrapper and of the container. It is always 100%, if nothing else is set. Just set a width of 50% to every block and float them left.
#wrapper {
overflow: hidden;
}
.block {
float: left;
width: 50%;
}
Example
would something like this work for you: http://jsfiddle.net/swm53ran/338/
you can see the div to by commenting out overflow: hidden
<div class="container">
<div class="block block1">
This is content for div 1 This is content for div 1 This is content for div 1
</div>
<div class="block block2">
This is content for div 2 This is content for div 2 This is content for div 2
</div>
</div>
body {
overflow: hidden;
}
.container {
width: 200%;
padding: 0px;
}
.block {
display: inline-block;
width: 50%;
float: left;
outline: 1px solid gray;
}
Boy, am I a fool!?
In my case answer was pretty simple. I had left autofocus attribute on my input which were on the off screen div, and of course it automatically scrolled to that div.
Thanks everyone for answers though. :)
I have three divs, all inline under a parent div. And my goal is to make middle div ALWAYS in the centre of the parent div. While rest two side divs are responsive. In left hand side div, text is align to right while in left hand side div, its aligned to left. And middle div's width is fixed, say 80px. Parent div's max and min width are also set. I have this:
<div style="max-width: 500px;min-width:450px;">
<div style="display:inline-block;text-align:right;">Posted by</div>
<div style="display:inline-block;text-align:center;width:80px;">
<img src="default.png" style="width:80px;height:20px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">
</div>
<div style="display:inline-block;">Johnathan Bestualzaukazoa</div>
</div>
I want to have something like this:
But middle div is not always in center. As side divs content push them.So how can I achieve it?
I suggest to use this CSS table layout for it. I set 50% on both left and right sides, and middle one with an image. Because it's table layout it won't break, instead it will re-calculate the value of 50% and display the best width "(100% - image width) / 2" available automatically.
jsfiddle
.container {
display: table;
border: 2px solid grey;
margin: 20px auto;
}
.container > div {
display: table-cell;
}
.left, .right {
width: 50%;
padding: 0 10px;
}
.left {
text-align: right;
}
.middle img {
vertical-align: middle;
}
.right {
text-align: left;
}
.container1 { width: 500px; }
.container2 { width: 400px; }
.container3 { width: 300px; }
<div class="container container1">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container2">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container3">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
I have a main div with 2 divs inside it, and a secondary div. To get the divs inside the main to be in the poisition i wanted them to be i set position to relative and it worked but the secondary div is now above the main div(in the browser) for some reason. I probably used position wrong, if someone can correct my it will help me a lot.
#main {
position: relative;
}
#right {
float: right;
position: relative;
display: inline-block;
}
#left {
float: left;
position: relative;
displayLinline-block;
}
#subDiv {
position: relative;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
browser shows:
<div id="subDiv">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
what's my mistake?
You need to wrap a clearfix around the 2 floating divs. Also, display inline-block is used instead of floating, not in additon too. You also have a typo in your css "displayLinline-block;" but that could just be your example.
You can make a new class like such:
.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}
and then wrap all your floated elements in a classed called "cf" and this will fix your issue.
<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->
<div> another div with more content that is not interferred with content above. </div>
It's not entirely clear what look you are trying to achieve but it sounds as though you need to clear the floats.
There are multiple methods of clearing which are detailed in THIS Stack Overflow question
#left,
#right,
#subDiv {
height: 50px;
}
#left {
float: left;
width: 50%;
background: red;
}
#right {
float: left;
width: 50%;
background: blue;
}
#subDiv {
background: green;
clear: both;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
Clear divs of floats. Also, be careful that you have a typo in the CSS. "displayLinline-block".
My fiddle:
http://jsfiddle.net/yJdbF/17/
HTML:
<div class="container">
<div class="content">
<div class="span70">
DDDDD
</div>
<div class="span30">
FFFFFFFFFF
</div>
</div>
</div>
CSS:
.container {
margin-top : 65px;
}
.content {
border : 10px solid green;
}
.span30 {
width: 40%;
background-color : red;
float : left;
}
.span70 {
width: 60%;
background-color : blue;
float : left;
}
The div.span70 and div.span30 are not fully contained inside div.content. span* divs are floated divs (which are tricky).
how can I fully contain them inside??
If you put
overflow: hidden;
on your .content class, then it works.
You need to clear your floats. For example with Nicolas Gallagher micro clear-fix or simply with an overlow: hidden
.content {
border : 10px solid green;
overflow: hidden;
}
DEMO
You should add a clearfix see updated fiddle.
Css
.clear {
clear:both;
}
Html
<div class="container">
<div class="content">
<div class="span70">
DDDDD
</div>
<div class="span30">
FFFFFFFFFF
</div>
</div>
<div class="clear"></div>
</div>