My current page is leaving small blank area near footer. Not sure what causing the problem. Below is my code:
<link rel="stylesheet" type="text/css" href="style/test_style.css">
<body>
<div id="header">
</div>
<div id="navigation">
<ul>
<li>test</li>
</ul>
</div>
<div id="main">
<div id="sidebar">
this is a test
</div>
</div>
<div id="footer"></div>
</body>
test_style.css:
body {
margin: 0; }
#header {
text-align: left;
margin: 0 auto;
height: 50px;
background: #ccccff; }
#header h1 {
margin: 0;
padding: 1em; }
#main {
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
#sidebar {
float: left;
height: 100%;
width: 150px;
background: #999900;
}
#footer {
clear: left;
margin: 0 auto;
height: 50px;
background-color: #666600;
padding: 20px; }
#navigation {
float: left;
width: 100%;
background: #333; }
#navigation ul {
margin: auto;
padding: 0; }
#navigation ul li {
list-style-type: none;
display: inline; }
#navigation li a {
display: block;
float: right;
color: #ffff99;
text-decoration: none;
border-left: 1px solid #fff;
padding: 5px; }
#navigation li a:hover {background: #383}
There are two options:
1) Change float: top; to float: left; for #main:
#main {
margin: 0;
padding: 0;
float: left;
height: 700px;
width: 100%;
background: #009999;
}
2) Add clear: both; to #main:
#main {
clear: both;
}
The reason it isn't working as you have it, is that you've floated the element within #main (the #sidebar) to the left, which sort of messes up the structure of the #main div. That means that #sidebar is placed just below the element above (#navigation) while #main is placed at the very top of the page (behind #navigation, so the top is not visible) causing it to not come down as far as the #sidebar div.
Just to exemplify: Another way to do it would be to add the height of #navigation (which in my browser is 28px) to the padding of #main, so:
#main {
padding-bottom: 28px;
}
Add float:left; to your #main
#main {
float:left;
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
Please see: http://jsfiddle.net/cNZ46/1/
Here (link) is a fixed code with both HTML and CSS changes.
Notice that I moved #sidebar out from the #main so that they're apart from each other. Also I changed footer's clear to both which fixed the whitespace above it.
<div id="main">
<p>Main content here!</p>
</div>
<div id="sidebar">
<p>Sidebar here!</p>
</div>
I've set up a min-height to both, sidebar and main area, just to show you it works.
Related
I'm not an expert using css, after 1 hour of time spent on this problem I will ask the community.
my html code:
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>
my css code:
.content2 {padding: 10px 30px; color: #fff}
.Menu {background: #022000; width: 1000px; height: 50px; margin: 20px auto; text-align: center}
.Menu a {float: left; height: 26px; width: 313px; padding: 12px 10px; color: #fff}
.Menu a:hover {background: #277521}
I would like the two items in my Menu class full fill the width of the navbar. Currently they don't take the complete width of the navbar.
Use width: 50%; and modify the padding as padding: 12px 0px;.
Explanation:
width: 50% : As there are 2 elements, this will enable each element to take 50% of the parent's width.
padding: 12px 0px : padding 0px for right and left helps remove the extra space required for each element.
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 26px;
width: 50%;
padding: 12px 0px;
color: #fff;
background-color: yellow;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>
Try following way.
Give width:50% and box-sizing: border-box; to a. And change height:50px;
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 50px;
width: 50%;
padding: 12px 10px;
color: #fff;
box-sizing: border-box;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>
Working Fiddle
Try it with flex. Add these styles:
.Menu {display: flex;}
.Menu a {flex: 1;}
This will work with any number of menu items, not only 2.
Tip: flex is a very powerful property and I suggest you research it a little if you are interested why my code works.
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 26px;
width: 50%;
padding: 12px 0px;
color: #fff;
background-color: yellow;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>
Well, as it is shown on the screenshot I've linked below, there's a problem with centering this div containing two Tumblr posts columns. I want to have it centered in the part of the page, where no sidebar is given. Moreover, I would like to make posts in two columns following each other without any space. IMG: http://i.stack.imgur.com/VLkkr.jpg
CSS:
body {
margin: 0px;
background-color: antiquewhite;
text-align: center;
word-wrap: break-word;
}
body #content {
width: 900px;
display: inline-block;
margin: 15px 15px 15px 15px;
}
body #content #wrapper {
display: inline-block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
body #content #wrapper #posts {
display: inline-block;
background-color: white;
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
float: left;
text-align: left;
}
body .sidebar {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
body .sidebar .sidebar-inside {
display: table-cell;
max-width: 250px;
margin: 0 auto;
vertical-align: middle;
}
/* etc */
HTML:
<!-- These two columns -->
<div id='content'>
<div id='wrapper'>
{block:Posts}
<div id='posts'>
{block:Photo}
<!-- Here are posts. -->
</div>
{/block:Posts}
</div>
</div>
<!-- Sidebar -->
<div class='sidebar'>
<div class='sidebar-inside'>
</div>
</div>
Help me out, guys! Please!
Maybe a solution (for one thing) with CSS3 Column: (and do not use mulitple times the id atrribute.. use classes.. )
body #content #wrapper {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
-moz-column-gap:405px;
-webkit-column-gap:405px;
column-gap:405px;
}
body #content #wrapper #posts {
<strike>float: left;</strike> /*delete this one..*/
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
Edit: user ask for more..
the reason is that the sidebar is position:absolute; so it does not count in space available for centering..
place this just behind </div> from wrapper
<div class="Gh2"></div>
.Gh2 {
width: 250px; /*sidebar width*/
float: right; /*place it to the right where sidebar is*/
height: 1px; /*need some height..*/
}
than:
body #content {
/* width: 900px; deleted those unwanted settings*/
/* display: inline-block; deleted those unwanted settings*/
margin: 15px 15px 15px 15px;
}
Not sure why there is a space to the right of each li, as you can see here when you mouse over it. Obviously don't want it there and can't figure out how to get rid of it. Any help would be greatly appreciated!
Here is the code:
HTML:
<header>
<div class="nav-container">
<nav class="nav-items" role="navigation">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
position: fixed;
top:0;
background-color:#2C5463;
height:2.3em;
width: 100%;
border-bottom-color: black;
border-bottom-style: solid;
}
header .nav-container {
margin: 0 30px;
height: 100%;
display: block;
padding: 0;
}
.nav-items {
float: left;
margin: 0;
height: 100%;
}
.nav-items ul {
display: inline-block;
margin: 0;
height: 100%;
}
.nav-items ul li {
display: inherit;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
.nav-items ul li a {
display: inherit;
text-decoration: none;
color: #ffffff;
margin: 0 auto;
padding-top: 8px;
white-space: nowrap;
height: 100%; /* Width and height of top-level nav items */
width: 90px;
text-align:center;
vertical-align: middle;
}
.nav-items ul li:hover {
background: #617F8A
}
http://jsfiddle.net/eF83x/
Inline elements are sensitive to white space. Remove the white space and the problem goes away.
Ex:
<ul>
<li>list1</li><li>list2</li><li>list3</li>
</ul>
jsFiddle example
You can remove the spaces between the list items literally, occupy the space with HTML comments (<!-- -->), or float them left.
Just needs to changes on css class here for your solution,
.nav-items ul
{
display: **inline-table**;
margin: 0;
height: 100%;
}
Demostration
What you could also do is make the lis float left and display them as block. This will fix it without messing with the html code.
.nav-items ul li {
float: left;
display: block;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
jsFiddle example
I have HTML
<div class="mainwraper" style="width:100%;">
<div class="header1">
div logo left <img src="logo"> // - it sends it pasted to the left sidebar
div class right // it send it pasted to the right sidebar
</div> // need to center them in the page and keep the repeative effect
<div class="header2" style="width:100%;">
<div class="headbar">
<ul class="menu" style="background:#0099CC;"> … </ul>
</div>
</div>
</div>
CSS
.mainwraper {
margin:0 auto;
}
.header1 {
float:left; width:100%; height:78px; margin-top: 10px;
}
.header2 {
float:left;
width:100%;
position:relative;
z-index:auto;
height:52px;
margin-top:20px;
background: #000;
opacity: 0.65;
border-radius: 10px;
}
.headbar {
background-color: inherit;
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
border-radius: 10px;
}
.menu {
background-color: inherit;
background-image:url(images/menugradient.png);
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
I want it to look like this [1]: http://postimg.org/image/hi7knv1tp/ "tooltip"
but it looks something like this [2]: http://postimg.org/image/ptqdhlfyv/ |tooltip".
I also want to mention that after i have another Div class main wrapper of 972px that is centered correctly.
you can use margin:0 auto; to center your navigation
I got some problems with layouting in CSS. Here is the code I am talking about: Fiddle.
The <div id="header"> should have the height of the <div id="menubuttons"> which I marked red.
I always thought that if you don't state the height of a div it will get the height of it's children.
The <div class="contentLine> is stuck to the <div id="theme"> although I defined margin-top: 20px;.
The right column always has greater margin than the left column. I want both to have the same margin to the browser window.
CSS
body {
margin: 0 auto;
padding: 0;
font-family:'Share', cursive;
}
#header {
width: 100%;
vertical-align: middle;
}
#header_logo {
width:;
float: left;
margin: 11px 20px 20px 20px;
background-color:;
}
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: red;
}
#menubuttons ul {
list-style-type: none;
margin:0;
padding:0;
}
#menubuttons li {
float: left;
margin-right: 20px;
}
a {
font-family:'Share', cursive;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration:underline;
}
#theme {
width: 100%;
height: 400px;
background-color: green;
margin-top: 0;
float: left;
}
.contentLine {
margin: 0 auto;
margin-top: 20px;
width: 96%;
}
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
/* shadow for seeing div boundaries */
box-shadow: 0 0 1px black inset;
}
.contentLine #last {
margin-right: 0;
}
Let me go 1 by 1
1) Your <div id="header"> contains floated elements, you need to clear that, so use overflow: hidden; on parent element i.e #header
2) Again, you've floated #theme but you've set it to width: 100%; so you don't need float there.
3) About the last you need to set the margins accordingly, right now it's 1% so you need to calculate this correctly, I would like to suggest you to use box-sizing: border-box; and set 33% width for each element and than apply padding-right
Demo
Also make sure you clear your floating elements which are nested inside contentLine.
If you are not one of those IE fans, than you can use the snippet below, which will self clear the parent element in a better way.
.clear:after { /* Much much better than overflow: hidden; */
content: "";
display: table;
clear: both;
}
Update your html
</ul>
<!--Menu ends here -->
</div>
<!--menubuttons ends here -->
<!--Add following div to your code -->
<div class="clear"></div>
</div>
<div id="theme">
Update your CSS
.clear{
clear:both;
}
This should help.
- will be reusable also.