Following is the all in one code i.e. html and style. Question is that why the "Box" div is being overlapped on to the "Footer" div. You can copy paste the code and see it yourself in the browser. I have checked the styles and div's starting and ending myself by so far no success. Am i missing something?
.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Just add "display: inline-block" and "width:100%" in your main div and footer.
CSS:
#footer, #main {
display: inline-block;
width: 100%;
}
Add class .clr to element has class .shell as below:
CSS
.clr:after {
content: "";
display: block;
clear: both;
height: 0;
margin: 0;
padding: 0;
}
HTML
...
<div class="shell clr">
...
Jsfiddle:
https://jsfiddle.net/merLdd2y/
.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main" style="display:inline; width:100%">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You're not properly clearing your floats.
#footer {
background: url(images/footer.jpg) left top repeat-x;
color: #b3adad;
padding: 24px 4px;
font-size: 10px;
clear: both;
}
This will clear the floats of the header.
You can also create the following class and add that to the parent of any container containing floated elements.
.clearFix:after {display: table; clear: both; content: "";}
An element will float around the next content found in the flow, in this case, footer's text. Check this link for more info about floats: https://css-tricks.com/all-about-floats/
In this case, depending on what you plan for your .shell i would add the following style:
.shell:after {
content: ' ';
display: table;
clear: both;
}
.shell { width:950px; margin:0; position:relative; }
.shell:after {content: ' '; display: table; clear: both;}
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Keep in mind that there are more solutions. You could use flex-box approach, you could use display:inline-block approach, you coul even use grid approach. It all depends on what you want to achieve and what browsers you want to support.
If you have floated children (.box), your parent block don't know about that until you tell him. Just add to parent block (.shell) style overflow :hidden.
#main .shell { overflow :hidden; }
Related
I am making the website and attaching the current situation as in screenshot
as you can see that the background images is not spreading throughout the body. Anyone can figure it out
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!-- START PAGE SOURCE -->
<div class="wrap">
<header>
<div class="container">
<h1>Schooling india</h1>
<nav>
<ul>
<li class="current">Home Page</li>
<li>
<div class="dropdown">About Us
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Admissions
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Rules
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Info Corner
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Achievements
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Gallery
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Contact
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
</ul>
</nav>
<form action="#" id="search-form">
<fieldset>
<div class="rowElem">
<!-- <input type="text" placeholder="Search">
Search</div> -->
<script type="text/javascript">
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<!-- <script > var date=new Date();
document.write(date);</script> -->
</fieldset>
</form>
</div>
</header>
<div class="container">
<aside>
<h3>Categories</h3>
<ul class="categories">
<li><span>Programs</span></li>
<li><span>Student Info</span></li>
<li><span>Teachers</span></li>
<li><span>Admissions</span></li>
<li><span>Administration</span></li>
<li><span>Basic Information</span></li>
<li><span>Vacancies</span></li>
<li class="last"><span>Academic Calendar</span></li>
</ul>
<form action="#" id="newsletter-form">
<fieldset>
<div class="rowElem">
<h2>School lettter</h2>
<input type="email" value="Enter Your Email Here" onFocus="if(this.value=='Enter Your Email Here'){this.value=''}" onBlur="if(this.value==''){this.value='Enter Your Email Here'}" >
<div class="clear">UnsubscribeSubmit</div>
</div>
</fieldset>
</form>
<h2>Academic <span>Calender</span></h2>
<ul class="news">
<li><strong>June 30, 2017</strong>
<h4>1<sup>st</sup> parents-teacher meeting</h4>
parents are requested to be present by 11:00 am sharp </li>
<li><strong>June 14, 2017</strong>
<h4>Start of new term</h4>
Students should be present on the 1st day timings are from 8:00 am to 2:00 pm </li>
<li><strong>May 29, 2017</strong>
<h4>Result declaration</h4>
Report card distribution will start at 9:00pm</li>
<li>
<h4>See more...</h4></li>
</ul>
</aside>
<section id="content">
<div id="banner">
<h2>Educating <span>India <span>Since 1992</span></span></h2>
</div>
<div class="inside">
<h2>Recent <span>News</span></h2>
<ul class="list">
<li><span><img src="images/icon1.png"></span>
<h4>About Us</h4>
<p>This is the region wherein you can give a brief description of your school and its pros. Maybe you can give a read more option too.</p>
</li>
<li><span><img src="images/icon2.png"></span>
<h4>Our Branches</h4>
<p>We have branches in following areas<br><ul style="color: #008cc4">
<li><strong>Branch 1</strong></li>
<li><strong>Branch 2</strong></li>
<li><strong>Branch 3</strong></li>
<li><strong>Branch 4</strong></li></ul></p>
</li>
<li class="last"><span><img src="images/icon3.png"></span>
<h4>Student’s Life</h4>
<p>In this region you can include the alumini students and their profile, recent performance of students in competitions or olympiads</p>
</li>
</ul>
<h2>Move Forward <span>With Your Education</span></h2>
<p><span class="txt1">XYZ school</span>,our school follows the moto of jai Jagat: praise the world. We strive to provide education for everyone</p>
<div class="img-box"><img src="images/1page-img.jpg">Harbouring students from all over the city, with its distingused faculty and staff, we strive to provide excellent education with appropriate details and diversity in knowledge to prrepare better citizens fro a better tomorrow. Having eastablished in 1992, our schoolhas crossed many milestones and from time to time proved its worth by winning competitions and olympiad all over the world</div>
<p class="p0"></p>
</div>
</section>
</div>
</div>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2017 SiteName - All Rights Reserved</p>
<p class="rf">Design by Rohit Jaiswal</p>
<div style="clear:both;"></div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Following is the style sheet
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#454545;
background-image:url(../images/tail-middle.jpg) repeat-y ;
/*background-image: no-repeat;*/
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
}
.dropdown:hover .dropbtn {
background-color: #white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #grey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
html {
min-width:940px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
width:940px;
overflow:visible;
font-size:.875em;
padding-bottom:176px;
}
header {
background:url(../images/header-bg.jpg) no-repeat center top;
min-width:940px;
}
header .container {
height:194px;
position:relative;
padding:0;
}
section#content {
float:left;
width:691px;
}
aside {
width:219px;
float:left;
margin-right:30px;
padding:5px 0 0 0;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
min-width:940px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
.categories {
padding-bottom:37px;
}
.categories li {
font-weight:bold;
font-size:.857em;
padding-bottom:8px;
margin-bottom:6px;
background:url(../images/divider1.gif) repeat-x left bottom;
}
.categories li.last {
background:none;
padding:0;
margin:0;
}
.categories li span {
display:block;
padding-left:15px;
height:1%;
background:url(../images/marker.gif) no-repeat left 5px;
}
.categories li a {
text-decoration:none;
color:#008cc4;
}
.categories li a:hover {
color:#ff7b01;
}
.news {
margin-top:-25px;
}
.news li {
padding-top:25px;
line-height:1.429em;
}
.news li strong {
font-size:.857em;
color:#454545;
display:block;
padding-bottom:3px;
}
.news li a {
color:#008cc4;
text-decoration:none;
font-weight:bold;
}
.articles {
margin-top:-18px;
}
.articles li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.429em;
padding-top:18px;
}
.articles li img {
float:left;
margin-right:22px;
}
.sitemap {
padding-bottom:15px;
}
.sitemap li {
padding:0 0 5px 16px;
background:url(../images/marker1.gif) no-repeat left 5px;
}
.sitemap li ul {
padding-top:5px;
margin-bottom:-5px;
}
.list {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.list li {
float:left;
width:175px;
margin-right:53px;
}
.list li.last {
margin:0;
}
.list li span {
display:block;
text-align:center;
}
.list li h4 {
padding-top:20px;
}
.list li p {
margin:0;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.429em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:16px;
line-height:1.429em;
}
.p0 {
margin:0;
}
.address {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.address address {
font-style:normal;
line-height:1.429em;
float:left;
width:248px;
}
.address address strong {
color:#008cc4;
width:94px !important;
width:91px;
float:left;
}
.address .extra-wrap {
float:left;
width:385px;
}
.address p {
margin:0;
}
#banner {
width:691px;
height:299px;
background:url(../images/banner-bg.jpg) no-repeat left top;
}
#banner h2 {
color:#fff;
font-size:42px;
text-transform:none;
line-height:1.2em;
padding:75px 0 0 55px;
margin:0;
}
#banner h2 span {
display:block;
margin-top:-12px;
color:#fff;
}
#banner h2 span span {
font-size:30px;
margin-top:-8px;
}
a {
color:#ff7b01;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
width:473px;
height:63px;
position:absolute;
left:0;
top:4px;
background:url(../images/logo.jpg) no-repeat left top;
}
h2 {
font-size:24px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
h2 span {
color:#8d8d8d;
}
h3 {
font-size:20px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:15px;
}
h4 {
font-size:1em;
color:#008cc4;
margin-bottom:5px;
}
h4 a {
color:#008cc4;
text-decoration:none;
}
h4 a:hover {
color:#ff7b01;
}
.txt1 {
color:#008cc4;
font-weight:bold;
}
.link {
position:absolute;
right:0;
top:159px;
}
header .nav-bg {
background:no-repeat center top;
}
header nav {
position:absolute;
left:0;
top:100px;
}
header nav ul li {
float:left;
font-size:16px;
line-height:1.2em;
text-transform:uppercase;
padding-right:1px;
background:url(../images/divider.gif) repeat-y right top;
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a {
color:#454545;
text-decoration:none;
display:block;
float:left;
text-align:center;
padding:18px 0 20px 0;
background-repeat:no-repeat;
background-position:left top;
}
header nav ul li.current a, header nav ul li a:hover {
color:#008cc4;
}
header nav ul li a.m1 {
width:95px;
}
header nav ul li.current a.m1 {
background-image:url(../images/m1-act.jpg);
}
header nav ul li a.m2 {
width:80px;
}
header nav ul li.current a.m2 {
background-image:url(../images/m2-act.jpg);
}
header nav ul li a.m3 {
width:85px;
}
header nav ul li.current a.m3 {
background-image:url(../images/m3-act.jpg);
}
header nav ul li a.m4 {
width:60px;
}
header nav ul li.current a.m4 {
background-image:url(../images/m4-act.jpg);
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a.m5 {
width:100px;
}
header nav ul li.current a.m5 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m6 {
width:100px;
}
header nav ul li.current a.m6 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m7 {
width:75px;
}
header nav ul li.current a.m7 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m8 {
width:85px;
}
header nav ul li.current a.m8 {
background-image:url(../images/m5-act.jpg);
}
#content .inside {
padding:22px 20px 0 29px;
}
#content .inner_copy, #content .inner_copy a {
border:0;
float:right;
background:#000;
color:#ff7b01;
width:100%;
line-height:10px;
font-size:10px;
margin:-50% 0 0 0;
padding:0;
}
#search-form .rowElem {
height:28px;
position:absolute;
right:0;
top:30px;
}
#search-form input {
width:205px;
background:#fff;
padding:4px 5px 4px 5px;
border:1px solid #d0d0d0;
border-right:0;
color:#454545;
line-height:1.2em;
float:left;
height:18px;
}
#search-form a {
text-transform:uppercase;
color:#fff;
text-decoration:none;
float:left;
background-color:#0087c1;
padding:6px 11px 0 11px;
height:22px;
}
#search-form a:hover {
background-color:#47b6e5;
}
#newsletter-form {
padding-bottom:45px;
}
#newsletter-form fieldset {
background:url(../images/newsletter-bg.gif) no-repeat left top;
width:219px;
height:131px;
overflow:hidden;
}
#newsletter-form .rowElem {
padding:13px 19px 0 17px;
}
#newsletter-form input {
border:1px solid #0086b5;
background:#fff;
color:#8e8e8e;
font-size:.857em;
padding:2px 5px 2px 5px;
width:171px;
margin-bottom:13px;
}
#newsletter-form h2 {
color:#fff;
margin-bottom:13px;
}
#newsletter-form a.fleft {
color:#fff;
position:relative;
top:3px;
}
#newsletter-form a.fright {
display:block;
color:#fff;
border:1px solid #26b6e8;
text-decoration:none;
background-color:#006caa;
padding:2px 11px 3px 11px;
}
#newsletter-form a.fright:hover {
background-color:#47b6e5;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
height:30px;
}
#contacts-form .field.extra {
height:268px;
}
#contacts-form label {
float:left;
width:123px;
font-weight:bold;
color:#008cc4;
}
#contacts-form input {
width:277px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
}
#contacts-form textarea {
width:503px;
height:252px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
overflow:auto;
}
footer {
background:url(../images/footer-bg.png) no-repeat center top;
margin-top:-120px;
min-width:940px;
}
footer .footerlink {
margin:0 auto;
width:940px;
height:60px;
padding-top:60px;
color:#454545;
font-size:.785em;
line-height:1.429em;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#454545;
}
.footerlink a {
color:#454545;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#454545;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
Use
background-size:cover;
to stretch the image across the body. If the body background is not covering the footer,that is because you have defined another backgound for footer in
footer {
background:url(../images/footer-bg.png) no-repeat center top;
/*You need to remove the above line*/
margin-top:-120px;
min-width:940px;
}
Edit2
After seeing your [ comment ], it seems that you're still overriding the body background unnecessarily. Why would you?
Change
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
//The above directive will override the body bg, so just remove it
min-width:940px;
}
to
.wrap {
min-width:940px; // Only this seems a sensible declaration.
}
I currently have a Header in my HTML which is a Unordered List with List Items display = inline. What I am try to accomplish is to spread each of the 5 items into an equaled space (20% Width for each) and step them centered in their respective spaces. I was able to accomplish this with a lot of ease on the Footer, but instead of List Items, I used Divs for each of the Options. Can anyone help me do the same with list? I can redo it as Divs, but I'd like to at least know how to make the list work.
How it should be
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
}
#header li {
display:inline;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I hope I was able to illustrate what I am trying to accomplish, but if it is still unclear please let me know. Thanks in advance for any help.
You can try like this ,I hope it will helps you.
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
}
#header .holder {
width:100%;
float:left;
}
#header ul {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
#header a {
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#header li {
display: table-cell;
padding: 5px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 20%;
}
#header li:after {
border-left: 1px solid #2f477a;
content: "";
height: 20px;
position: absolute;
right: 0;
top: 8px;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
ul {
display: flex;
}
#header li {
...
flex: 1;
display: flex;
align-items: center;
justify-content: center;
...
}
https://jsfiddle.net/234zzgn7/
Add this css. Ofcourse this is using flexbox which is something that I found to be extremely awesome. But you should investigate whether your users support it or not.
http://caniuse.com/#search=flexbox
Here try this. Changes are on #header li and #header a
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
display:block;
width:100%;
box-sizing:border-box;
}
#header li {
display:inline-block;
box-sizing:border-box;
width:20%;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I've created five different sections of images, displayed just as you can see in jsfiddle, the problem is that I can't control the margin of these imagesections. The thing is that I'm trying to add some space between section 1, 2, 3, 4 and 5, but whenever I add the margin the section just refuse to move.
I've tried to reset the float with the codes:
clear:both;
and
float: none;
but without success. The result of those codes is just that the section jumps to a new line.
The fiddle: https://jsfiddle.net/p0eaxkpz/
I found your problem, there is an error in your code: margin-left:0,5%; should be margin-left:0.5%;
Here is your updated jsfiddle
I have simply added margin: 0; padding: 0; to all elements, you can see it's working well. Basically, there is no need for you to wrap the images with <section> tags.
I also got a more modular aproach
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body
{
background-color:black;
width:100%;
height:100%;
padding-bottom:20%;
}
#wrapper
{
width:80%;
height:1000px;
background-color:white;
margin:auto;
}
#headerloga
{
float:left;
width:20%;
height:20%;
font-family: "Gotham Medium";
font-weight:800;
font-size:40px;
padding-top:10%;
padding-left:10%;
}
#menu
{
float:left;
width:60%;
height:auto;
font-family:"Gotham Medium";
font-size:15px;
padding-top:17.5%;
padding-left:10%;
}
ul {
float: left;
width: auto;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: auto;
text-decoration: none;
color: black;
padding: 0.2em 0.6em;
}
a:hover {
color:#ED1C91;
}
li {
display: inline;
}
#imageshosting {
background-color:#CCC;
width:60%;
height:80%;
position:absolute;
clear:both;
top:40%;
left:18%;
}
.img-hosted {
display:block;
position:relative;
float:left;
height:49%;
margin:0.5%
}
.w33 {
width:32.33%;
}
.w66 {
width:65.66%;
}
.img-nextline {
clear: both;
}
#foot {
background-color:#666;
clear:both;
position:absolute;
top:120%;
left:18%;
width:60%;
height:10%;
}
<div id="wrapper"><!-- Webpage wrapper-->
<div id="headerloga">
Test
Test2
<section style="color:#ED178C; ">Test3 </section>
</div>
<div id="menu"><!--Menu-->
<ul>
<li>KUNDER</li>
<li>GAMLA FAVORITER</li>
<li>OM OSS</li>
<li>KONST</li>
<li>KONTAKT</li>
</ul>
</div><!-- End of menu-->
<!-- images starts-->
<div id="imageshosting">
<img class="img-hosted w33" src="images/testimage1.jpg"/>
<img class="img-hosted w33" src="images/testimage2.jpg"/>
<img class="img-hosted w33" src="images/testimage3.jpg"/>
<!-- New image line -->
<img class="img-hosted w66 img-nextline" src="images/testimage4.jpg"/>
<img class="img-hosted w33" src="images/testimage5.jpg"/>
</div><!--Imageshosting ends-->
<!--Footer here-->
<div id="foot">
<p>Hello</p>
</div>
</div><!-- End of webpage wrapper-->
I have to floated elements in my div, I used clearfix I found in internet, but it isn't working as it should.
<div id="header" class="clear">
<div class="header-left"> </div>
<div class="header-right">
<div class="quick-drop">
<ul>
<li class="quicklinks">Quicklinks
<img src="images/quicklink-icon.png" />
</li>
<li class="dropdown">Select from dropdown
<img src="images/dropdown-icon.png" />
</li>
</ul>
</div>
<div class="search-block">
<input type="text" class="search" name="search" placeholder="Search for something here" />
</div>
</div>
<div class="header-nav">it should be below but it is under</div>
</div>
CSS
.clear:before, .clear:after {
content:"\0020";
display: block;
height: 0;
overflow: hidden;
}
.clear:after {
clear: both;
}
.header-left {
float:left;
margin:40px 0;
}
.header-right {
float:right;
margin:40px 0;
}
.logo {
background:url('../images/logo.png') no-repeat;
width:250px;
height:50px;
display:block;
}
.quick-drop {
display:inline-block;
}
.quick-drop ul {
margin:0;
padding:0;
margin:18px 0;
}
.quick-drop ul li {
list-style-type:none;
display:inline-block;
height:19px;
padding:3px;
text-align:center;
font-size:12pt;
}
ul .quicklinks {
color:#c7c7c7;
border-right:1px #c7c7c7 solid;
}
ul .dropdown {
color:#58159b;
}
.quick-drop ul li img {
margin:0 15px;
}
.search-block {
display:inline-block;
}
.search {
background:url('../images/search-icon.png') right no-repeat #fff;
background-position:260px;
width:260px;
height:16px;
border:none;
outline-color:#58159b;
padding:15px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color:#c7c7c7;
}
http://jsfiddle.net/qKFAc
The .header-nav should be below the 2 divs, but it is under them, what I'm doing wrong?
Thank you.
Clear fixes should be AFTER the floated elements, like so:
Remove the clear class from the parent. Then:
<!-- Floated -->
<div class="clear"></div>
<div class="header-nav">it should be below but it is under</div>
.header-nav
{
clear:left;
}
please add this css rule
Add this:
.clear {
clear: both;
}
jsFiddle: http://jsfiddle.net/qKFAc/1/
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..