I'm trying to put my container (box) next to my other container (box). Instead of them being next to each other, they end up being above/below each other. I'd prefer them to be next to each other instead of this.
This is my code;
<div id="blog">
<img src="images/mlblog.png">
<img src="images/mltownareaconcept.png" style="width: 300px; height: 100px;">
<p>Check out the town area concept!</p>
<p>Click here to read the blog!</p>
#blog {
background: url(-) repeat;
width: 300px;
height: 250px;
border: 2px solid #855E42;
margin-left: 200px;
margin-top: 50px;
}
#forums {
background: url(-) repeat;
width: 300px;
height: 250px;
border: 2px solid #855E42;
margin-left: 900px;
margin-top: 0px;
}
Do you know how I can fix this? Thanks!
You need to "float" one of your containers and remove your "margin-left".
#blog {
background: url(-) repeat;
border: 2px solid #855E42;
float: left;
margin-top: 50px;
width: 300px;
height: 250px;
}
#forums {
background: url(-) repeat;
border: 2px solid #855E42;
margin-top: 50px;
width: 300px;
height: 250px;
}
if case of both containers having same height, you can use this style:
#blog, #forums { display: inline-block; }
In your HTML I don't see a Div for forums...You need to add a a float:left to #blog and #forums if you want them to sit next to each other
#blog {
background: url(-) repeat;
border: 2px solid #855E42;
float: left;
margin-top: 50px;
width: 300px;
height: 250px;
}
#forums {
background: url(-) repeat;
border: 2px solid #855E42;
float:left;
margin-top: 50px;
width: 300px;
height: 250px;
}
<div id="blog">Your code...</div>
<div id="forums">Your code...</div>
Add a clearing div below blog and forum.
.clear {
clear:both;
}
Also Thomas suggested float the forum div to right.
Good luck with that.
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 6 years ago.
Don't mind the commented out lines. I'm experimenting with the box model, but can't seem to figure out why I can't use margin-top to drop the yellow box a bit down? I can use margin-left to get it to move to the right, so that seem weird to me... Thanks.
I'd like to understand why this happens :)
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
//padding-left: 50px;
margin-left: 10px;
//border: 2px solid black;
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
//display: inline;
//float: left;
//margin-right: 0px;
margin-left: 50px;
margin-top: 25px;
}
<div class="largebox">
<div class="box1"></div>
</div>
This happens due to margin collapsing - so a border, padding to the parent element or inline content (any inline element) will switch off margin collapsing.
See demo below:
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
margin-left: 10px;
border: 1px solid; /*ADDED THIS*/
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
margin-left: 50px;
margin-top: 25px;
}
<div class="largebox">
<div class="box1"></div>
</div>
Use display:inline-block; in box1
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
//padding-left: 50px;
margin-left: 10px;
//border: 2px solid black;
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
//display: inline;
//float: left;
//margin-right: 0px;
margin-left: 50px;
margin-top: 25px;
display:inline-block;
}
<div class="largebox">
<div class="box1"></div>
</div>
You can try using position:absolute; in .box1 like this:
.box1{
position:absolute;
}
So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I'm trying to center a div within a div with equal margins. If possible, the box should be in the center of the page. So far I've got the following code:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #3D3D3D;
padding: 30px;
}
#box{
background-color: gray;
border: solid black 4px;
}
#header {
height:60px;
width: 800px;
margin: auto;
border: solid black 2px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
line-height: 60px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(white));
background: -webkit-linear-gradient(left, #52524E, #AAAAA4);
background: -moz-linear-gradient(left, #52524E, #AAAAA4);
background: -o-linear-gradient(left, #52524E, #AAAAA4);
background: linear-gradient(left,#52524E, #AAAAA4);
}
#header a {
font-size: 22px;
color: black;
margin: 30px;
text-decoration: none;
}
img#code {
display: block;
margin: auto;
margin-bottom: 10px;
margin-top: 30px;
width: 500px;
}
#container{
width: 800px;
border: solid white 2px;
margin: auto;
margin-bottom: 30px;
}
.splitter {
width: 500px;
height: 5px;
background-color:black;
margin: auto;
margin-bottom: 10px;
border-radius: 35px;
}
#text1{
background-color: #999999;
margin: auto;
margin-bottom: 30px;
width: 500px;
text-align: left;
border-radius: 5px;
}
.inside{
margin: 30px;
}
#text1 h3{
border-bottom: solid black 1px;
}
.border{
width: 200px;
margin-top: 20px;
margin: auto;
text-align: center;
}
#box2{
width: 500px;
height: 100px;
background-color: blue;
margin: 70px auto ;
position: relative;
}
.midbox{
width: 100px;
height: 50px;
background-color: red;
margin: 30px auto;
position: absolute;
}
and html
<html>
<head>
</head>
<body>
<div id="box">
<div id="header">
About Me
Hobbies
Pictures
Contact Me
</div>
<div id="container">
<img id="code" src="http://i380.photobucket.com/albums/oo250/willc86/IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg" border="0" alt=" photo IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg"/>
<div class="splitter"></div>
<div id="text1">
<div class="border">
<h3> Coding in clouds</h3>
</div /* border */>
<br>
<div class="inside">
<p> From coding, to Scripting. We all share
the same fate. We look, obsereve, figure out,
and analyze everything around us. We have an
eye to solve things, put things together, Fix
things, and show our pride when the work is done;
yet many of its roots gets unoticed.
<br> <br> To other souls,
we are just a body stuck in this world, but we, in fact
are the ones that assebles technology, make things whole,
and make everyone become one in this crazy thing
called the Web. We are Software developers. We code,
we fix, and we make it possible.
</div inside>
</div /*text1*/>
<div id="box2">
<div class="midbox">
hello
</div>
</div>
</div /* container */>
</div /* box */>
</body>
</html>
Something like this perhaps?
http://jsfiddle.net/tezf8/1/
You had two margin values on each box, so the "margin: auto;" was overriding the "margin: 30px;" in .testbox2
Here is the CSS:
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin: 50px auto 0;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
margin: 48px auto;
}
Try This:
CSS
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin:0 auto;
margin-top:40px;
position:relative;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
HTML
<div id="testbox">
<div class="testbox2">
</div>
</div>
I have this code:
<header>
<div id="logo">
<img src="img.png" width="288px" height="80px"/>
</div>
</header>
And this CSS:
header { width: 960px; height: 100px; padding: 10px; }
#logo { float: left; height: 100%; border: 1px solid #000; }
#logo img { border: 1px solid #000; }
How to centralize vertically the img element in this div? I have use the display table, and table cell, but not work.
#logo { height: 100%; border: 1px solid #000; text-align:center; }
-------^^^^^^^^^^^^^^^^^^---
also remove the float
Live Demo
Use this tag text-align: center ; from the CSS for the image to the CSS for its parent div, so your CSS looks like this:
.box {
height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align:center
}
.box img {
height: 100%;
width: auto;
}
Just Replace Your CSS like this.
http://jsfiddle.net/lvtrvd/29uGQ/
header { width: 400px; height: 100px; padding: 10px; }
#logomark { height: 100%; border: 1px solid #000;position: relative;}
#logomark img { border: 1px solid #000; position: absolute;top:0;
bottom:0;left:0;right:0; margin:auto;}
Okay, so this is all supposed to be in one 139px height header and it renders as such in dreamweaver, but as soon as I view it in a browser the menu div splits down onto a second row.
Here's the HTML:
<div id="header">
<div id="header2">
<div id="title">
<img src="titleimg.png" border="0" />
</div>
<div id="menu">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
</div>
And here is the CSS:
#header {
top: 0;
left: 0;
position: fixed;
height: 139px;
width: 100%;
background-image: url('headerbg.png');
border-bottom: solid 1px #797978;
text-align: center;
display: inline-table;
}
#header2 {
width: 1040px;
margin: 0 auto;
text-align: left;
}
#title {
padding-top: 27px;
width: 287px;
height: 112px;
background-image: url('title3d.png');
background-repeat: no-repeat;
background-position: right bottom;
float: left;
}
#menu {
width: 753px;
height: 13px;
border-left: solid 1px #474747;
display: inline-table;
}
#one {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#two {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#three {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#four {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#five {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
Help would be greatly appreciated!
You are making the mistake of thinking your total width is 1040px by just adding up the width of #menu and #title but you are forgetting that you also have a 1px border-left on your #menu hence your width becomes 1041 and hence gets pushed over. so if you reduce either the menu or title's width by 1pixel you will be good to go :)
Also you can save some code on the css for the menu elements if you are going to repeat the same code for #one, #two etc etc:
#menu > div {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
The width of your title element is set to 287px; which is larger than the container.
I have tweaked up your code a little bit to make it sane.
http://jsfiddle.net/gwfQt/
The issue what you are actually facing is, you have divided the width of #title and #menu completely within 1040px which is the width of your header.
However, you didn't take into account that DIV within #menu has borders.
Also suggest you use classes if you have repetitive styles for different divs.
Let me know if I can improve my answer with better code.