I'm trying to make a box display under one I currently have but for some reason it's not displaying below it.
As you can see the second box overlaps the big one, I need the little box to be under the box on the left.
Here is my CSS:
.boxResources {
background-color: #d0e4fe;
display: inline;
float: left;
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
margin-left: auto;
margin-right: auto;
width: 20%;
padding-bottom: 16px;
}
.boxTroops {
background-color: #d0e4fe;
display: block;
float: left;
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
margin-left: auto;
margin-right: auto;
width: 20%;
padding-bottom: 16px;
}
boxResources is the box on the left, and boxTroops is the little box that's overlapping.
Thanks for your help guys
I am displaying it with HTML like:
<div class = 'boxResources'></div>
<div class = 'boxTroops'></div>
http://jsfiddle.net/f73XF/
Just add:
.boxTroops {
clear: left;
}
Updated fiddle
Here: http://jsfiddle.net/f73XF/11/
.box {
background-color: #d0e4fe;
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
width: 50%;
margin-left: auto;
margin-right: auto;
padding-bottom: 16px;
padding-top: 16px;
}
.boxResources {
background-color: #d0e4fe;
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
margin-left: auto;
margin-right: auto;
padding-bottom: 16px;
}
.boxTroops {
background-color: #d0e4fe;
display: block;
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
margin-left: auto;
margin-right: auto;
padding-bottom: 16px;
}
.col-left{
float:left;
width:23%;
}
Related
I have three divs in page called header, content and footer. Header is showing at top and have no issue.
The following css is not working properly with inner div (Content) to fit its content and screen display.
While I want to
expand inner div to fill screen size and footer remain at bottom.
Keep divs in order
fill content always
I have tried many css solutions but nothing works perfect to fit div at page and content both.
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
Please note its wordpress theme and woocommerce pages need to show inside inner div
check this jfiddle and tell me if it works as you wanted thank you.
body{
margin:0px;
}
.header{
background-color:#bf4b4b;
height:80px;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
height:100vh;
padding:80px 0px;
background-color:#FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.footer{
background-color:#243b82;
height:80px;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
Flex display could be a great option here. It looks like you started down that path already. Adding a surrounding container with a min-height of the full window, "100vh", might accomplish what you're looking for. Let me know how this works out:
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
.container {
display: flex;
width: 100%;
min-height: 100vh;
flex-direction: column;
}
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
http://codepen.io/amishstripclub/pen/gwNGXw?editors=1100
I have solved using overflow property and sticky footer as below:
.header {
background-color: #bf4b4b ;
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
position: fixed;
right: 0;
left: 0;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5%;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
overflow:auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer {
background-color: #243b82 ;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
}
How to set fit-content for width in right side. I used fit-content value for width and every things Okay in left side, but in right side content put in center of page. I use this CSS for make dynamic width by content:
.chat li.right .chat-body {
margin-right: 60px;
border: 1px solid $c-grey;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
margin-left: 20%;
max-width: 80%;
width: fit-content;
}
It's my chat example:
CodePen Example
Replace with my give code.
.chat li.left .chat-body {
margin-left: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-right: 20%; */
max-width: 80%;
width: fit-content;
float: left;
}
.chat li.right .chat-body {
margin-right: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-left: 20%; */
max-width: 80%;
width: fit-content;
float: right;
}
and:
.chat li small.pull-left {
padding-left: 60px;
padding-top: 5px;
clear:both;
}
.chat li small.pull-right {
padding-right: 60px;
padding-top: 5px;
clear:both;
}
Working Demo
I want to do items style like here
and I'm doing it with UL. Here is the code what I have http://jsfiddle.net/WVLR9/1/
ul.gallery_items {
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li {
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-left: 19px;
}
ul.gallery_items li:first-child {
margin-top: 25px;
margin-left: 0px;
}
but I have no idea why the 4th item have bigger margin-left option... it should be in the same place like 1st item but in the second line. Can anyone help me?
http://jsfiddle.net/WVLR9/2/
You put margin-left: 19px on the li's rather than margin-right.
Margin left was causing the 4th row to be a certain margin away from the left border
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px;
}
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
You are explicitly giving the first item a different left margin:
ul.gallery_items li:first-child{
margin-left: 0px;
}
ul.gallery_items li{
margin-left: 19px;
}
4th item has the same margin as other items, you just removed margin from the first item:
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
and it looks like something is wrong with 4th element;
You could use margin-right instead of margin-left
You could wrap each row with additional <div class="row">
You could remove margin-left: 0 form the first element, and give margin-left: -19px to the parent element
how about this :)
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px; /* maybe you will need to adjust your margin on the ul element. */
}
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 10px;}
this should do it.
You've applied a
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
thats why first item didnt have left margin
Look at this picture of it...
http://www.flickr.com/photos/91733140#N06/8329388242/in/photostream
How can i make this div go to the left and not the right?
it keeps messing up and i really need it to be fixed any ideas how i can make it work?
<style type="text/css">
#body {
height: 100%;
margin: 0;
padding: 0;
}
#html, body {
height: 100%;
margin: 0;
padding: 0;
background: #E0E0E0;
}
#header {
background: #FFFFFF;
height: 33px;
width: 100%;
padding: 5px 30px 5px 30px;
font-family: arial;
font-size: 30px;
border-bottom: 1px #737373 solid;
position: fixed;
top: 0;
}
#container {
width: 1205px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#box {
width: 228px;
height: auto;
background: #FFFFFF;
border: 1px #5E5E5E solid;
margin: 5px;
float: left;
font-family: arial;
}
#box_title {
width: 218px;
height: auto;
padding: 5px;
background: #5E5E5E;
color: white;
border-bottom: 1px #FFFFFF solid;
float: left;
font-family: arial;
}
#box_img {
width: 210px;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
#box_options {
width: 228px;
height: 40px;
background: #FFFFFF;
color: #000000;
border-top: 1px #5E5E5E solid;
float: left;
font-family: arial;
Not to judge you by your open tabs but you seem to want a "Pinterestish" wall. This is not easy via vanilla css, may I suggest looking into jquery masonry?
http://masonry.desandro.com/
It does all the heavy lifting for you
I have a DIV which I want to always keep in the center of the screen even when the browser is resized. Also there is a floating right DIV which shouldn't overlap the center DIV.
Chrome is causing lots of problems with either center going off the screen at the left side or the right floating DIV overlapping the center DIV.
CSS
.center {
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 650px;
height: 200px;
margin: auto;
}
.right {
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 200px;
height: 200px;
float: right;
}
body {
border-style: dashed;
border-width: 1px;
}
HTML
<div class="right">right</div>
<div class="center">center</div>
.center
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 50%;
height: 200px;
margin:0 auto;
}
.right
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 25%;
height: 200px;
float: right;
}
I've found only 1 issue, and its the right div overlapping the center div, here is a possible solution to that, you just needed to add position: relative; to the class of the center div
CSS
.center
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 650px;
height: 200px;
margin: 0 auto;
display: block;
position: relative;
}
.right
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 200px;
height: 200px;
float: right;
display: block;
}
body
{
border-style: dashed;
border-width: 1px;
}
Hope it helps!
This works for me so long as the content never overlaps:
.right {
float: right;
min-width: 0;
border: 1px solid blue;
box-sizing: border-box;
}
.center {
width: 50%;
margin: 0 auto;
border: 1px solid green;
}
If that's the issue, I think you have to explore options where the content font-size shrinks as the page shrinks, which I think is only available with js reliably.
Try this
<div class="center">center</div>
<div class="right">right</div>
.center {
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 650px;
height: 200px;
margin: auto;
display:block;
}
.right {
border-style: solid;
border-width: 1px;
background-color: #0f0;
width: 200px;
height: 200px;
float: right;
margin-top:10px;
display:block;
}
body {
border-style: dashed;
border-width: 1px;
}