I am using CSS to float a div next to another one. This div only appears if the user is looking at their own "business." When I don't clear anything, a large space appears between these divs and the next one. When I do clear the float, the text in the next div is pushed to the left. I think I am misunderstanding something about how to use the float and clear. I'm not very good with CSS.
How can I remove the space without destroying the "fs" div?
Here are pictures to show what is happening:
Here's the CSS and HTML code:
div.stuff {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
}
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
top:-97px;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
clear:right;
}
div.fs {
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
<div class=stuff>
<img src=/economy/images/cash.png> Cash on Hand: 10,245<br>
<img src=/economy/images/worker.png> Workers Employed: 6<br>
<img src=/economy/images/machine.png> Machines Leased: 4
</div>
<div class=container>
Click Here to Manage Cash on Hand.<br>
Click Here to Manage this Business.<br>
Click Here to Disband this Business.
</div>
<br>
<div class=fs><a href=/economy.php?section=fs&id=7>Historical Financial Statements</a></div>
You need to float your left hand div, and use clear:both on the div at the bottom. I've made some changes in this jsFiddle.
perhaps this:
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
/*top:-97px;*/
margin-top:-97;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
/*clear:right;*/
}
I would float your div.stuff to the left and your div.container to the right and just use clear: both on the div.fs element. I made a small fiddle to illustrate this. In this fiddle I added a wrapper class for clarity where I set a min-width to prevent that the right div floats down one line when the browser window is resized. Try it out!
Here's the CSS:
div.stuff {
border: 1px dotted black;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
float: left;
}
div.container {
border: 1px dotted black;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
margin: 10px;
border-radius: 5px;
overflow: hidden;
float:right;
}
div.fs {
clear: both;
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
Related
I am trying to obtain the following responsive layout
DIVs
with no luck. Can someone please help me ?
DIV1 has width = 100%,
DIV 2, DIV3 and DIV4 have all float:left while DIV5 has float:right; but the layout that I achieve is wrong :(
My attempt to create the image using flexbox.
https://codepen.io/goughjo02/pen/GBLdXW
N.B. instead of float: right;, you can use margin-left: auto; - that has the effect of automatically allocating all free space to the left of the div.
There you go!
I followed your picture.
#wrap {
border-style:solid;
border-width:thin;
padding: 10px;
min-height:50px;
min-width:100%
display: flow-root;
}
#innerwrap{
display: inline-grid;
}
.div_left {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float:left;
margin:5px 10px 5px 10px;
padding: 15px;
}
#div2 {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float:left;
padding: 50px 15px 50px 15px;
}
#right {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float: right;
margin-top:5px;
padding: 15px;
}
Div1
<div id="wrap">
<div id="div2">Div2</div>
<div id="innerwrap">
<div class="div_left">Div3</div>
<div class="div_left">Div4</div>
</div>
<div id="right">Div5</div>
</div>
http://jsfiddle.net/9877/6E2pQ/2/
What I want do is have columncontent1 on the left and columncontent2 and columncontent3 stacked on the right side. see the jsfiddle. How do I fix the css? I am running out of ideas. Is the error in the css or the way the div placed in the body:
<style type="text/css">
/*<![CDATA[*/
.columncontainer1{
width:1001px;
position:relative;
border:0px;
background-color:#fffffa;
overflow:hidden;
}
.columncontainer2{
float:left;
position:relative;
right:300px;
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
}
.columncontainer3{
float:left;
position:relative;
bottom: 10px
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
}
.columncontent1{
float:left;
width:680px;
position:relative;
background-color:#933;
border: 1px;
left:300px;
padding:10px;
overflow:hidden;
}
.columncontent2{
float:left;
width:280px;
position:relative;
background-color:#FFF;
border: 2px;
left:301px;
padding:10px;
overflow:hidden;
}
.columncontent3{
float:left;
width:280px;
position:relative;
left:301px;
border: 4px;
background-color:#CC6;
padding:10px;
overflow:hidden;
}
/*]]>*/
</style>
There's a lot going on there, I've simplified the HTML and CSS:
CSS:
.leftCol {
float: left;
width: 50%;
background-color: #ccc;
height: 60px;
}
.rightColContainer {
float: left;
width: 50%;
}
.rightCol1 {
background-color: #333;
height: 30px;
}
.rightCol2 {
background-color: #777;
height: 30px;
}
HTML:
<body>
<div class="leftCol">columncontent1</div>
<div class="rightColContainer">
<div class="rightCol1">columncontent2</div>
<div class="rightCol2">columncontent3</div>
</div>
</body>
You only need to 'contain' the right hand column to stop the 'stacked column' flowing incorrectly.
CSS3 actually allows you to make several columns automatically without having to have all those classes. Check out this generator: http://www.generatecss.com/css3/multi-column/
This is however only if you are trying to make your content have multiple columns like a newspaper.
css
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
position:absolute;
}
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
border:1px solid #E0DCD1;
clear:both;
}
Html
<div id="content2">
<div>content</div>
<div>content</div>
</div>
Result
div1 is showing inside div2
I need
div1 then
div2
Please help me.
why using position absolute,no need for clear property for last-child
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
/*position:absolute;*/
}
#content2 div:last-child
{
width:1024px;
height:200px;
/*position:absolute;*/
border:1px solid #E0DCD1;
/*clear:both;*/
}
div are cleared by default unless after using float property
remove position absolute from both child divs...
If you are using Position: absolute; specify the margin for both div's.
eg:
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
margin-top: xxx; /* specify the top margin */
border:1px solid #E0DCD1;
clear:both;
}
i think you are looking like this :- http://tinkerbin.com/3qRLgscO
Actually you made CSS bit of complicated for yourself.You can get your desired results through very simple CSS without using of positioning.
And if we are using float than we should use the clear for clearing the floated div's otherwise no need to use the clear property.
Here is the simple code of yours i have some simple changes in your CSS.....
HTML
<div id="content2">
<div>div1</div>
<div>div2</div>
</div>
CSS
#content2 {
background: none repeat scroll 0 0 red;
height: 200px;
width: 1024px;
}
#content2 div:first-child {
background: none repeat scroll 0 0 #E4ECF7;
height: 45px;
}
#content2 div:last-child {
background: none repeat scroll 0 0 yellow;
border: 1px solid #E0DCD1;
height: 45px;
}
I hope this will help you........
you can use the following properties in your div class.
float:left
clear:right;
I am trying to something pretty simple.
I have two buttons inside a div. One needs to be float right, one needs to be float left
<div class="btnwrapper">
<div class="btnright"><span>Continue</span></div>
<div class="btnleft"><span>Back</span></div>
<div style="clear:both;"></div>
</div>
And the corresponding CSS
.calculator .btnwrapper { width:607px; }
.calculator .btnleft { float:left; border:1px solid green; }
.calculator .btnright { float:right; border:1px solid red; }
a.button { background:url(../images/bg-button-left.gif) no-repeat; float:right; height:29px; width:auto; padding:0 0 0 8px; display:block; color:#FFF; text-decoration:none; font-weight:bold; font-size:13px; cursor:pointer;}
a.button span { background:url(../images/bg-button-right.gif) top right; height:16px; padding:8px 8px 5px 0px; display:block; width:auto; cursor:pointer; }
Here is the results I'm getting in IE7. All other modern browsers handle this correctly.
Remove float: right from a.button.
With it: http://jsfiddle.net/K8XQr/
Without it: http://jsfiddle.net/K8XQr/1/
They look identical, except that losing float: right fixes it in IE7.
I found this article and I decided that I liked the way they styled links and buttons.
So I took the CSS from the article...
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
Then I have several buttons in a row I want to use like this...
<div class="buttons">
<img src="pict1.png" class="positive" alt=""/>Button 1
<img src="pict2.png" alt=""/>Button 2
<img src="pict3.png" class="negative" alt=""/>Button 3
</div>
See this example: http://reljac.com/csstest.php
But that row of buttons may need to be aligned center, not all to the right or left. If I change the CSS to...
.buttons a, .buttons button{
/*display:block;
float:left;*/
margin:0 7px 0 0;
The buttons no longer appear correctly when there is an image, specifically in IE 6,7 & 8.
See this example: http://reljac.com/csstest_wo.php
I can change the float to right to get the buttons to align right but I can't figure out what to do to get them centered (like in a <td></td>).
So the short of it is I want to use the style as it is but I also need to be able to center justify the buttons if necessary.
Try adding this to the CSS:
.buttons
{
text-align:center;
margin: 0px auto 0px auto;
}
The auto makes the margins equal on each side. The text-align is a bodge for older browsers.
EDIT:
Add an extra div around the buttons called buttonwrapper. then apply this CSS
.buttonwrapper
{
position:relative;
float:left;
left:50%;
}
.buttons
{
position:relative;
float:left;
left:-50%;
}
Method taken (but not tested) from http://www.pmob.co.uk/temp/centred-float4.htm
I found that when you have a parent div float left and a child div you're trying to center, a lot of times people forget inheritance.
HTML:
<div class="parent">
<div class="child">
Text
</div>
</div>
CSS:
.parent {
float: left;
width: 300px;
}
.child {
float: none; /* <-- IMPORTANT! */
width: 200px;
margin-left: auto;
margin-right: auto;
}
IMPORTANT :
Inheritance states that the child div is also floated left. So, make sure that the child div has no float, then margin: auto like usual.