My goal is to place four divs within a single "container" div. Here's my code so far:
HTML
<body>
<div id="navBar">
<div id="subDiv1">
</div>
<div id="subDiv2">
</div>
<div id="subDiv3">
</div>
<div id="subDiv4">
</div>
</div>
</body>
CSS
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
margin-left: 25%;
}
#subDiv3
{
float: left;
margin-left: 50%;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
margin-left: 75%;
}
As far as I know this is the only part of my code that's relevant to my question so I left some other parts out.. Don't mind the width and margin of the navBar, because it's actually within another container as well.
P.S I searched Google and StackOverFlow and I could not find an answer that was helpful. There were many questions about placing two divs within a single div, but none for aligning multiple divs within a single div.
Thanks for any help in advance!
I'd do two things, get rid of the margins on your floated divs and add the box-sizing rule.
jsFiddle example
#navBar {
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4 {
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
box-sizing:border-box;
}
#subDiv1 {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
#subDiv2 {
float: left;
}
#subDiv3 {
float: left;
}
#subDiv4 {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
You can use display: table
.menu {
display: table;
width: 100%;
border: 1px solid black;
border-right: none;
box-sizing: border-box;
}
.menu > div {
display: table-row;
background-color: green;
}
.menu > div >div {
border-right: 1px solid black;
display: table-cell;
text-align: center;
}
#media screen and (max-width: 400px) {
.menu {
display: block;
float: left;
width: auto;
border: none;
}
.menu > div {
display: block;
}
.menu > div > div {
border: none;
padding-right: 10px;
display: block;
text-align: left;
}
}
fiddle
The main issue that I saw with your css is that you add in a margin for each float item. This would make sense if it was positioned absolutely. Since it isn't the divs will stack. Removing the margins will allow the divs to fit in the container:
http://jsfiddle.net/eGLTM/
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 24%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
}
#subDiv3
{
float: left;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
I think the problem you are having, is that you need to clear your floats. This might not be the best way to do it, but for simplicities sake, add this:
<div style="clear:both;"></div> after the last <div> inside your container(#navBar).
Related
So I want to create something what you can see in Codepen however as I was getting into point to add arrows into both ends I realized that I have started that all out in a wrong way. My CSS will grow way to long for such small thing and will have probably problem with other elements on the page. I could not figure out what's the best approach to create these left and bottom lines with arrows in both ends and value from attribute so I hope some of you can point me out to right direction.
.ruler-left:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom {
position: relative;
display: inline-block;
text-align: center;
width: 225px;
height: 2px;
float: right;
margin-right: 5px;
margin-top: 110px;
font-size: 0px;
}
.ruler-bottom:before {
content: '';
position: absolute;
top: -5px;
left: 0;
border-top: 5px solid Gainsboro;
border-right: 10px solid black;
border-bottom: 5px solid Gainsboro;
background-color: Gainsboro;
}
.ruler-bottom:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
<div class="shape-container">
<hr class="ruler-left" data-height="30 mm">
<div class="shape">Shape image</div>
<hr class="ruler-bottom" data-width="30 mm">
</div>
I played with your problem a little...
See my Fiddle
I kept most of your CSS, but dropped the :before pseudos wich were rendering arrows.
I kept the :after pseudos wich show dimentions.
To draw the left and right arrows, I used classes wich only draw a triangle with the border of an element.
I applied those two classes on another element (I used hr again... Could be something else) placed before and after your «ruler» hr.
These three hr are wrapped in a div for positioning and rotation.
CSS
.arrowRight{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #000000;
}
.arrowLeft{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 16px 8px 0;
border-color: transparent #000000 transparent transparent;
}
/* -------- */
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
.shape-container {
display: block;
position:absolute;
width: 260px;
height: 260px;
background: Gainsboro;
padding: 2px;
}
.ruler-left-div {
position:absolute;
left:-104px;
top:110px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
transform: rotate(-90deg);
}
.ruler-left {
display: inline-block;
width: 190px;
height: 2px;
}
.ruler-left:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom-div {
position:absolute;
bottom:10px;
right:8px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
}
.ruler-bottom {
display: inline-block;
width: 190px;
height: 2px;
margin-bottom:8px;
}
.ruler-bottom:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
HTML
<div class="shape-container">
<div class="ruler-left-div"><hr class="arrowLeft"><hr class="ruler-left" data-width="30 mm"><hr class="arrowRight"></div>
<div class="shape">
shape image
</div>
<div class="ruler-bottom-div"><hr class="arrowLeft"><hr class="ruler-bottom" data-height="30 mm"><hr class="arrowRight"></div>
</div>
I have a div below two floating divs (one floating left and the other right). As I opened up the element inspector I noticed something odd. Why is it that a div below that with the css property clear: both overlaps the top two? Also, when I change the height of the div, the element inspector shows that the div no longer contains its contents. Here are two screenshots to show what I mean. The code is below the screenshots.
No height set in css:
Height of class "tags" set to 200px in css:
HTML for page
CSS for page
You have syntax errors in your CSS. You have some classes inside of other classes which won't work and also you have some unclosed brackets. I fixed it below
#container {
width: 900px;
min-height: 500px;
margin: auto;
background: #DDDDDD;
}
.entry {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.title {
text-align: center;
}
.name {
padding: 0px 10px;
}
.tag {
display: inline-block;
}
.link {
border: 1px solid black;
display: inline-block;
padding: 10px;
text-decoration: none;
}
.info {
width: 610px;
margin: auto;
}
.input-text_area {
width: 300px;
height: 250px;
padding: 0;
border: none;
resize: none;
}
.input-text_field {
width: 300px;
padding: 0;
margin: 0;
border: none;
}
.input-button {
width: 75px;
height: 50px;
margin: 2px 0px;
display: block;
float: right;
}
select {
float: right;
margin: 0px;
}
.right_half {
float: left;
padding: 1px;
height: 300px;
width: 300px;
}
.left_half {
float: left;
padding: 1px;
height: 300px;
}
.tags {
height: 200px;
}
label {
display: block;
}
.text_field {
width: auto;
}
.block-label {
display: block;
}
So I am working on a website at the moment, and all the content is arranged in boxes around the page. The css looks like this:
section {
position: static;
bottom: 110px;
}
#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
background-color: white;
padding-left: 10px;
padding-right: 10px;
box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
border-radius: 20px;
border: 1px solid #00BFFF;
}
#topLeft, #topRight {
padding-top: 10px;
}
#topLeft {
float: left;
margin-top: 200px;
width: 630px;
height: 310px;
}
#topRight {
float: right;
margin-top: 200px;
width: 300px;
height: 630px;
}
#middle {
clear: left;
position: absolute;
margin-top: 530px;
margin-left: 330px;
width: 320px;
height: 310px;
}
#bottomLeft {
clear: left;
float: left;
margin-top: 10px;
width: 300px;
height: 630px;
}
#bottomRight {
clear: right;
float: right;
margin-top: 10px;
width: 630px;
height: 310px;
}
img {
border-radius: 20px;
}
#topRight img {
margin-top: 25px;
}
#bottomLeft img {
margin-top: 20px;
}
And the footer goes below this, its css looks like this:
footer {
clear: left;
/*position: relative;*/
bottom: 0px;
padding-bottom: 20px;
margin-bottom: 20px;
padding-top: 40px;
height: 110px;
font: normal 12px 'Helvetica', sans-serif;
color: white;
text-align: center;
}
I want to add a new box below the others, but above the footer. Its css looks like this:
#below {
clear: both;
position: absolute;
float: left;
margin-top: 1170px;
width: 960px;
}
The problem is that this box overlaps the footer! And I just cannot work out how to fix this, any ideas?
#below { clear:both }
should be enough
Here is my current code but i don't see what the problem is. I'm new to html so i'm not really sure. I'd like to have a column on the left at about 20% space, column in the center which takes 60% of the space and column on the right that takes 20% space.
#wrapper {
background-color: #788D9A;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#mainleft {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
display:inline-block;
}
#maincenter {
width: 60%;
float: left;
overflow: hidden;
text-align: center;
padding: 10px;
padding-bottom: 1000px;
margin-bottom: -1000px;
display:inline-block;
}
#mainright {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
}
You need to be mindful when using padding-left padding-right margin-left margin-right border-left and border-right when you want that type of layout.
Each of those styles affect the overall width of that element so adding a padding: 10px will actually make your div width = 20% + 20px.
If you want to have that inner padding and border style an inner div
Example: http://jsfiddle.net/b62Ju/2/
HTML
<div id="wrapper">
<div id="mainleft">
<div>L</div>
</div>
<div id="maincenter">
<div>C</div>
</div>
<div id="mainright">
<div>R</div>
</div>
</div>
CSS
#wrapper {
background-color: #788D9A;
}
#wrapper > div
{
height: 1000px;
float: left;
text-align: center;
}
#mainleft {
width: 20%;
background-color: #ABB8C0;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: #ABB8C0;
}
#maincenter > div
{
height: 1000px;
border-left: solid black;
border-right: solid black;
}
#mainleft > div,
#maincenter > div,
#mainright > div
{
padding: 10px;
}
Alternatively you could use the box-model styles:
.box
{
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
}
more info: http://www.quirksmode.org/css/box.html
The display: table properties seem like the best choice here. You get your equal height columns (I assume that's what the crazy bottom margin/padding was for), no extra markup, and padding without having to worry about adjusting the box-model (learn more about the box-model here: http://css-tricks.com/the-css-box-model/).
http://jsfiddle.net/b62Ju/3/
#wrapper {
display: table;
width: 100%;
}
#wrapper > div
{
display: table-cell;
padding: 1em;
}
#mainleft {
width: 20%;
background-color: orange;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: green;
}
For your Reference if we need to place three dives side by side,
HTML:
<div class="main">
<div class="left">...</div>
<div class="center">...</div>
<div class="right">...</div>
</div>
CSS:
.main {
width: 1000px;
float: left;
display: inline-block;
}
.left {
width : 20%;
float: left;
display: inline-block;
}
.right {
width : 20%;
float: left;
display: inline-block;
}
.center {
width : 60%;
float: left;
display: inline-block;
}
it will work.
I think in your code you need set width for main wrapper div.
take a look at this Code. i want the Left & Right Box (DIVs) to appear in one line.. how to do it
<div><div style="float:left">a</div> <div style="float:left">b</div></div>
<div style="clear:both"></div>
Float both the left and right divs to the left and clear the footer. You will also need to adjust the widths of the left and right divs for them to fit on the same line.
#left
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#right
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#footer
{
position: static;
width : 100%;
height : 50px;
margin-top: 10px;
background: #111111;
border: solid 3px #ff0000;
text-align: center;
clear: both;
}