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.
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;
}
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/
I'm trying to get two divs to sit side by side. On my computer, in Safari and Firefox, it appears correctly. However, on my client's computer (also using Safari) they are overlapping.
Here is my CSS:
#content
{
clear: left;
float: left;
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline;
}
#aside
{
min-height: 850px;
float: right;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline;
position:absolute;
}
Is there something I missing or have coded wrong? I'm not a web developer but have been tasked with creating a fairly simple page.
Thanks in advance.
If you want something simple and straightforward (assuming #content and #aside are two sibling divs)...
<div id="content"></div><div id="aside"></div>
#content, #aside {
float: left;
}
#content {
background: red;
width: 150px;
height: 150px;
}
#aside {
background: orange;
width: 280px;
height: 150px;
}
Here's a Fiddle to demonstrate
Note: this is a simple solution that might not be the best for what you need. I suggest doing some research on CSS display and position properties.
Hey just change the display property to display: inline-block. You dont need to float any div if you want the div to sit side by side.
#content
{
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline-block;
}
#aside
{
min-height: 850px;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline-block;
position:absolute;
}
display: inline
It will not regard the width or height of any div. When we set display: inline, it will work as if its a "span" which does not regard width or height.
display: inline-block
It will regard the width or height of any div. When we set display: inline-block, it will be inline and it will regard the width and height of div.
I am trying to convert an existing site into responsive however there is one thing I'm struggling with here:
http://www.brandonsuffolk.com
When you resize the window I want the right column to squash the left one, however at the moment it drops underneath (however once the screen hits the other left div it will change).
When I do it with single divs it works, however as soon as I add a new div inside it, it won't work properly.
Here is the relevant CSS:
.MainOuter {
float: left;
width: 100%;
}
.MainWrapper {
max-width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.ColumnRight {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
float: right;
width: 290px;
padding: 0px;;
}
.ColumnLeft {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
width: auto;
max-width: 670px;
padding: 0px;
}
I'm afraid you're fighting the normal process of responsiveness. responsiveness is supposed to do just what it's doing. If you don't want it to drop under, find the #media for this element and change it to:
#media (min-width:0px) {
width:50%;
}
This may help
Assuming I understood, and you want the right-side column to maintain the fixed width, you'll need to use position:absolute with a left and right value, and width set to auto. This gives you a fixed side and a side that takes the rest of the screen.
Wanting it to only apply after they touch though, is where you'll have to use a media query. Set the media query to apply only when the screen is lower than 1000px, which will tell the left column to change there and become flexible.
EDIT
Try adding this CSS to your site's CSS file, at the end. Additionally I've updated the Fiddle to show how that it works. You might have to tweak the numbers a little, but it'll do what you need.
Example Fiddle
#media screen and (max-width: 1000px) {
.ColumnLeft {
position: absolute;
left: 20px;
right: 320px;
width:auto;
}
}
May this is what you mean with "squash" ?
http://jsfiddle.net/7QVVz/
CSS
.wrap {
display: table;
width: 100%;
}
.left {
display: table-cell;
border: 1px solid green;
width: 350px;
max-width: 350px;
}
.right {
display: table-cell;
border: 1px solid red;
}
.right > .text {
width: 200px;
float: right;
border: 1px solid yellow;
}
HTML
<div class="wrap">
<div class="left">LEFT</div>
<div class="right">
<div class="text">RIGHT TEXT</div>
</div>
</div>
I can't make two areas of content float beside each other without disrupting my container. I have the first area cued to float:left but when I cue float:right to content area 2 my container doesn't work anymore.
The object does float right but the container disappears.
Here is my website http://aasdsafasdf.weebly.com/ (I'm in the very early stages)
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
}
#content2 {
float: right;
height: auto;
width: 350px;
}
There are some markup errors on your page (notice the </script> tag after one of your links to a stylesheet?) but just set your container to hide overflow:
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
overflow:hidden
}
#content2 {
height: auto;
width: 350px;
float:right;
}
That should fix the issue. But make sure you fix up your code... it has a variety of issues now: http://validator.w3.org/check?uri=http%3A%2F%2Faasdsafasdf.weebly.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
display: block;
}
#content2 {
float: left;
height: auto;
width: 350px;
display: block;
}
You want both content div's to float left and be display:block;, then they will push up against the one to its left.