I have a problem with styling with CSS.
I can't fit the #main to the screen. I have a menu on the left side and i would like to have the main screen from the right next to the menu.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main{
position: relative;
width: 80%;
float:left;
padding:10px;
}
Here you are the screenshot how it is looking now:
How should I place "Content of the document" (#main) to be next to the nav?
EDIT: I have placed my code here: http://jsfiddle.net/47tjbnrt/
The problem is caused by your adding padding to the width. width is the width of its content and you set one to 80%, the other to 20%, and then add padding on top of that. Padding is the area around the content and, therefore, the width. That is why your second div drops down.
Either remove the padding or reduce the width of your elements.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
header {
text-align: center;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main {
width: 70%;
float:left;
padding:10px;
}
I changed the width to 70%, since you have a lot of padding. (Also removed the position: relative from your #main, do you have anything with position: absolute inside the main section?)
Also changed the width to 70%, since you have a lot of padding.
Related
So I followed this tutorial on centering content, it's a two column layout.
Tutorial
Here is the code for the completed product:
https://jsfiddle.net/dppttuvn/
My problem is, as soon as I change the #wrap width and then #main and #sidebar width so it fills the #wrap width, the layout completly screws up. As shown in this link:
https://jsfiddle.net/dwzvoarv/
The sidebar isn't to the right of the main section.
Can someone briefly explain why this happens and also fix it?
Thank you! (I'm still learning web development clearly lol)
It's because of the box-sizing. By default, browsers separate padding and width, so basically the total width of your element is padding + width.
Lets say your element is 1000px, with a padding-left: 100px. What the browser will do by default is paint the element as being 1100px because that extra padding isn't included in the width (by default).
Add this selector to the top of your stylesheet...
* {
box-sizing: border-box;
}
...and what this is doing is telling every element on the page (thats what the * selector with no parent selectors does) and sets the box-sizing property of it to border-box, meaning that the browser will now respect the width property as the actual total width.
So now if you have a 1000px element with padding-left: 100px, then the total width will still actually be 1000px including that padding.
You have to account for padding when you set widths. So to get 1000px you set #main to 700px and #sidebar to 300px. However since there is a 10px padding all around you have to subtract those pixels 10px left and 10px right. so your #main should be 680px and #sidebar should be 280px. Run this code in JS Fiddle and you can see it working.
body,
html {
margin: 0;
padding: 0;
color: #000;
background: white;
}
#wrap {
width: 1000px;
margin: 0 auto;
background: #99c;
}
#header {
padding:5px 10px;
background:#ddd;
}
h1 {
margin:0;
}
#nav {
padding:5px 10px;
background:#c99;
}
#main {
float:left;
width:680px;
padding:10px;
background:#9c9;
}
h2 {
margin:0 0 1em;
}
#sidebar {
float:right;
width:280px;
padding:10px;
background:#99c;
}
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
/* Navigation Bar */
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
display: inline;
margin: 0;
padding: 0;
}
That's because the actual size of the divs is width + padding + border.
Use:
div{
box-sizing:border-box;
}
To get the desired behaviour. Read more at https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
Updated fiddle: https://jsfiddle.net/dwzvoarv/4/
Specifically for your example, you can fix it by changing the wrap width to 1040px:
#wrap {
width: 1040px; /*instead of 1000px*/
}
width of wrap = width of main + width of column + padding of main (right and left) + padding of column (right and left)
= 700 + 300 + 20 + 20 = 1040px
Pretty new to html and css and i'm just having the problem described in the title. My nav is pushing down div with the id main.
nav{
width:120px;
float:left;
margin:0px 5px 0px 5px;
#main{
display:inline-block;
padding: 1em;
float:left;
position:relative;
min-width: 900px;
Any help is appreciated, cheers.
edit:
Hi guys, maybe i should explain it better. On the page there is a nav to the left and a div to the right of it. When the windows width is made smaller the div to the right is being pushed below the nav instead of stay where it is and it's content being displayed off the screen.
You have explicitly told your element to behave like that. When you set min-width and a width in pixels, you are telling your elements to stay the same size no matter what happens. Remove min-width and set width to a percentage value like 1% instead of 50px like this:
nav {
width: 50%;
background: red;
height: 50px;
float:left;
}
#main {
display: inline-block;
height:50px;
float:left;
position: relative;
width: 50%;
background: black;
}
body {
margin: 0;
}
<nav></nav>
<div id="main"></div>
I am trying to force div #content to fill vertically #screen div which has fixed size and allows scrolling on horizontal axis. The problem is #header which fit its content so I am unable to set fixed height for #content. #content has columns which are horizontally scrollable.
Setting height in jQuery should be easy but I am looking for CSS-only solution.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
}
#content {
-webkit-column-width: 100px;
max-width: none;
height:100% ;/*can not set fixed number as #header height could change*/
}
http://jsfiddle.net/Y7sfc/2/
I'm not sure if I understand your question fully but iI'm assuming its something along the lines of you not wanting a vertical scroll bar? and only a horizontal overflow right?
I added a height: 20%; to your header (or whatever you want) and changed the height of your #content to fill the rest so in this case, height: 80%;.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
height: 20%;/*add up to 100%(total size) of #container along with other elements*/
}
#content {
-webkit-column-width: 100px;
max-width: none;
height: 80%% ;/*add up to 100%(total size) of #container along with other elements*/
}
I believe the problem is because your #header and #content are both inside #container which has a set amount of space. Since your #content was set to take heigh: 100% of the space inside #container the #header still had to make room thus pushing the limit above 100% and creating a vertical slide bar.
http://jsfiddle.net/Y7sfc/4/
How to center several boxes in CSS? Suppose I have a div "navigation". Now, the navigation margin is auto, that is, it is in the center, how would I add lists(display:inline) inside navigation that will expand navigation on both sides. I haven't set the width property so the width will be dynamically expanding. Its like float :center.
Set margin:auto and width:940px and you are done. You can change width as per your need. But giving some width is compulsory.
Check this fiddle and tell me if it helped you.
http://jsfiddle.net/JNMZ3/4/
You can change padding of the li elements for more space. And then adjust width of the navigation div to keep it in center.
try this
your css replace with
http://jsfiddle.net/JNMZ3/3/
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 100px;
background:red;
float:left;
}
.rightsidebar {
background:blue;
height: 608px;
width: 100px;
float:right;
}
.content {
width: auto;
margin:0 auto;
background:yellow;
height:608px;
}
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}