This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 7 years ago.
I'm creating a webpage and trying to create the basic outline of my site by using div tags, however, I made a side-navigation div and body div. The size of my site is 1500px width and 1000px height, the side-navigation is 300px and body is 1200px.
I thought this would place them side by side, but, the body div, for some reason, went underneath the side-navigation div.
<body>
<div id="encase">
<div id="topNav">
<p> topNav </p>
</div>
<div id="header">
<p> header</p>
</div>
<div id="wholeBody">
<div id="sideNav">
<p> sideNav </p>
</div>
<div id="body1">
<p> body1 </p>
</div>
</div>
<div id="footer">
<p> footer </p>
</div>
</div>
and this is the css
<style>
#encase {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#header {
background-color:black;
width: 1490px;
height:110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#topNav {
background-color:green;
width: 1490px;
height: 50px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#wholeBody {
background-color: red;
width: 1490px;
height: 690px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}
#body1 {
background-color: purple;
width: 1190px;
height: 690px;
margin-left: 16%;
padding: 5px;
}
#footer {
background-color: blue;
width: 1490px;
height: 110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
</style>
I tried to do this using percentages as well, but, percentages don't seem to work properly for me. Does anyone have any idea of how to solve my problem? Thank You.
Float your side nav to left. This should fix your problem.
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
float: left;
padding: 5px;
}
Divs are block elements - this means that, by default, each new div will start on a new line. So we need to cancel that behavior via CSS. We can use the "float" property to make the divs move next to each other:
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
float: left;
}
Once you add in the float, you can switch this all back to % and it will work fine, too.
In the future, I would encourage you to look at HTML5, if possible, as it has better tag names that can reduce the number of divs you are using. This makes for cleaner, more readable code.
Just include a float:left inside your sideNav class in order to push the other div to the right,
fiddle url: https://jsfiddle.net/eugensunic/j030jyjm/
#sideNav {
float:left;
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}
Your calculation about the width is wrong, you are using margin-left: 16% in #body1 which is one of the factors causing this problem otherwise float:left would have fixed the problem.
Check out this fiddle: https://jsfiddle.net/4jnbb5w3/
Related
I experienced a problem with placing divs. The divs "menu" and "content" are meant to be next to each other. They were, until i tried to set their width using % instead of px. After applying that change the effect of 'float: left;' was cancelled. I tried changing the order of parameters in css file, but it didn't work. I want them to maintain the 20/80 ratio, while still being next to each other. Can i achieve that using this method, or am i missing some information, and these can't be used on the same div?
#menu {
background-color: lightgray;
width: 20%;
min-height: 600px;
padding: 10px;
text-align: center;
float: left;
}
#content {
background-color: gray;
width: 80%;
min-height: 600px;
padding: 10px;
float: left;
}
<div id="menu">
menu
</div>
<div id="content">
content
</div>
Seems like your padding is breaking the line because you are filling the 100% of the space.
See https://jsfiddle.net/6dfs27u8/1/
#menu{
float: left;
background-color: lightgray;
width: 20%;
text-align: center;
height: 600px;
}
#content
{
float: right;
background-color: gray;
width: 80%;
height: 600px;
}
The first two align perfectly, but the third one just won't. .. Can anyone here tell me what i'm doing wrong? I was stuck at this for hours last night, and this morning, by looking at other similar questions here, I was able to get the first two divs to align, but the third one won't no matter what. There is an entirely different div below it that it keeps going inside of instead of going up to align itself with the other two.
HTML & CSS
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
float: left;
width: 300px;
height: 300px;
background-color: white;
margin-left: 40px;
margin-right: 5px;
}
.frame2 {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: white;
}
.frame3 {
width: 30%;
height: 300px;
background-color: white;
margin-left: 5px;
margin-right: 40px;
float: right;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>
First. Set them all to float left, so the will try to pack left until they fill the page width.
If you set some of the widths percentually and other in absolute numbers, your design wont work for all screen sizes. You'll have to do a lot of math. I suggest you use all widths percentual, so they will behave in all screens.
In your case, they would align to the top only in screens where the width of all elements together isn't greater than the width of the screen.
I changed the background colors so we could see better.
obs: If you know the min screen size this has to work, you can use absolute numbers. You'll have to make the divs with their margins fit on the smallest considered screen size.
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
background-color: yellow;
float: left;
width: 33%;
height: 300px;
// margin-left: 40px;
// margin-right: 5px;
}
.frame2 {
background-color: blue;
float: left;
margin: 0 auto;
width: 33%;
height: 300px;
}
.frame3 {
background-color: green;
width: 33%;
height: 300px;
// margin-left: 5px;
// margin-right: 40px;
float: left;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>
Below is a simple html web page that is responsive except for one div (goplay) that over lays other parts of the page when screen size is reduced, instead of dropping below the image.
Styling Sheet external
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-30px;
padding-top: 5px;
max-width: 100%;
}
#goplay {
position: relative;
display: inline-block;
float: right;
margin-top:-250px;
margin-left:80px
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
Html which is set to call the above css
<div id="wrapperlp">
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">Some Text</div>
<div id="para">More Text</div>
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br />
<img src="https://.png" height="auto"/></a></div>
</div>
</div>
<div id="goplay">----form----/div>
<div id="spacer">
<div style="position: relative; float: left">Text</div>
</div>
margin-top and left should in %. thats y its overlay becoz of px
First off, it looks like you're missing a couple of divs.
The goplay div doesn't have a closing tag, (well it's got one but not that works)
Also your bottom spacer looks like it's missing a closing tag as well. Not sure if it's supposed to wrap anything or what.
Perhaps you had some copy/paste errors?
Normally if you set a negative margin it will overwrite other divs. You should, for the most part, not have to use negative margins.
I'm having problems making my site look good in Firefox. I have a div and then two divs inside the first one and I want the two that are inside two be side by side. This is the HTML:
<div class="gluggi3">
<h2 class="aust">Veðurspá</h2>
<div class="vedurspa">Some content</div>
<div id="map-canvas">More content</div>
</div>
and then the CSS:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border: solid;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
display: block;
width: 50%;
float: left;
padding-right: 50px;
}
#map-canvas {
height: 300px;
width: 300px;
margin: 0px;
padding: 0px;
display: block;
}
This code works fine in Chrome but not in Firefox, in Firefox the div with the class 'vedurspa' dissappears. I tried using inline, inline-block and initialising left like suggested in other questions, but still no luck. Can anyone tell me how I can make them stay side by side in Firefox? Thanks in advance!
you have a padding-right: 50px; on .vedurspa, therefor they are not side by side, removing that would solve your problem
It's not a FireFox issue. When the viewport is to narrow, #map-canvas will start wrapping.
Consider this:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
width: 50%;
padding-right: 50px;
float: left;
}
#map-canvas {
height: 300px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
}
Fiddle: http://jsfiddle.net/vUvhq/
Also, remove your comma in the first .gluggi3 class
.gluggi3,{}
to
.gluggi3{}
I'm assuming you added the padding-right to .verdurspa so there would be space between the blocks.
Try adding float: right; to #map-canvas
For some reason, the bottom section of my layout doesn't seem to be centered when I have set the left and right margin to auto
http://codepen.io/anon/pen/kvtcp
Please see the example.
I have since changed the code with some example you have provide but I have another issue. The bottom div has pushed up to left and right section div?
I have used margin-top 20px and nothing happens
Regards
Just remove:
float:left
from the .bottomsection class
and add
clear:both;
instead...
This is occuring because you have the div set to float left and the screen is the left edge.
Your divs above have margin left to pad them in.
I would suggest center your container.
http://codepen.io/anon/pen/sHvCA
body{
background:#90F;
}
#container {
width: 1000px;
height: 1200px;
padding-top: 25px;
overflow: auto;
margin:0 auto;
}
.header {
width: 800px;
height: 100px;
}
.leftimage {
float: left;
}
.middle {
height: 200px;
background:#FFF;
width: 800px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.leftsection {
width: 300px;
background-color: #FFF;
height: 400px;
margin-top: 10px;
float: left;
margin-left: 100px;
}
.rightsection {
background-color: #0F0;
height: 400px;
width: 479px;
float: left;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 20px;
}
.bottomsection {
clear:both;
height: 200px;
background: #FFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
That is because you have float:left; on it. Remove that, and add clear:both; instead.
I would recommend wrapping the left and right floated divs in another div, and apply overflow:hidden on the outer div for better control.
Ok,
remove the float from your bottom div.
.bottomsection {
height: 200px;
background: #FFF;
width: 800px;
/*float: left;*/
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
And in your HTML you have to clear the floats with i.e
<div class="leftsection"></div>
<div class="rightsection"></div>
<div style="clear:both;"></div>
<div class="bottomsection"></div>
This is a quick and dirty solution.
Here is a good link i.e. about floating div´s
http://css-tricks.com/all-about-floats/
It is floating for no reason and this causes showing up on the left side. Remove that. This time it should be fine, but you won't be able to see it because it has nothing in it. Add overflow:hidden; to avoid this. Then you might want to give some margin as well. And please keep in mind, use floats wise, not every problem requires float.