I am having trouble getting this too work, for some strange reason the DIV's do align horizontally correctly but the second div ends up under the first one. Any help would be greatly appreciated.
HTML:
<footer>
<div class="inner">
<section id="footer-copyright" class="clear left">
<ul>
<li>© 2013
Company
|
Sitemap
|
Privacy Policy
</li>
</ul>
</section>
<section class="footer-box clear right">
<ul>
<li>Design by Template</li>
</ul>
</section>
</div>
</footer>
CSS:
footer .inner {
padding-top: 50px;
}
#footer-copyright {
display: block;
padding-top: 35px;
width:50%;
}
#footer-box {
display: block;
padding-top: 35px;
}
footer ul {
color: #FFFFFF;
list-style: none outside none;
padding: 10px 0;
}
.inner {
margin: 0 auto;
position: relative;
width: 1000px;
}
.clear {
clear: both;
display: block;
}
.right, .alignright {
float: right;
}
.left {
float:left;
}
Maybe I just need a fresh set of eyes... :)
You can view a working link here
It's because your footer-box has clear: both; rule set (from the clear class). Remove it and add padding-top: 35px.
#footer-box has clear: both due to its clear class, so it's clearing below the #footer-copyright.
Related
I'm trying to get the three links - LOGO, About, and FAQ to show up on the same line, but I'm unable to do so. It seems that the margin-left on my nav-link class is screwing things up, but I'm not sure why.
body, html {
background-color: #EDEDED;
}
.nav {
position: absolute;
width: 80%;
margin: 5%;
}
.nav-link {
margin-left: 2%;
}
.nav-part {
display: inline-block;
}
.apply {
float: right;
position: relative;
right: 0;
top: 0;
}
<div class="nav">
<div class="nav-part">
LOGO
About
FAQ
</div>
<div class="apply nav-part">
<button>Apply</button>
</div>
</div>
Here's my jsfiddle - https://jsfiddle.net/hcrcba06/1/
the div that contains your links does not have much room to put the links on the same line so it brings the last one to the next line just increase the width of your nav-part class and it will work. JSFiddle here
You could easily solve that by changing it to CSS table layout.
body, html {
background: #EDEDED;
}
.nav {
display: table;
width: 80%;
margin: 5% auto;
}
.nav-part {
display: table-cell;
}
.nav-link {
margin-left: 2%;
}
.apply {
text-align: right;
}
<div class="nav">
<div class="nav-part">
LOGO
About
FAQ
</div>
<div class="apply nav-part">
<button>Apply</button>
</div>
</div>
It's because you are using margin in percentages.
Margins in percentages are always
relative to the width of the containing block.
Remove the margin-left in percentages. If you add a fixed margin it will work.
Use:
.nav-link {
margin-left: 12px;
}
instead of
.nav-link {
margin-left: 2%;
}
DEMO: https://jsfiddle.net/hcrcba06/3/
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
If browser width is 1024 - everything is OK, but when I resize it to 600px - footer's background does not expand vertically and "Need help" and "Join us" sections which went below does not have a background color... How to increase footer's height automatically if resizing happens?
Currently it looks this way (I did "select ALL" on the page to show white text)
But I want footer height to expand to look like this:
Thanks in advance.
CSS
.footer {
color: white;
height: 200px;
background-color: #536571;
font-size: 18px;
}
.about, .contacts, .help, .join {
float: left;
margin-top: 15px;
margin-left: 50px;
}
.about {
margin-left: 100px;
}
.join {
max-width: 300px;
}
.copyright {
clear: both;
float: right;
margin-right: 20px;
}
.footer ul p {
font-size: 24px;
font-weight: bold;
}
.footer ul {
list-style: none;
}
HTML
<div class="footer">
<div class="about">
<ul>
<p>About</p>
<li>Team</li>
</ul>
</div>
<div class="contacts">
<ul>
<p>Contacts</p>
<li>info#site.com</li>
</ul>
</div>
<div class="help">
<ul>
<p>Need help?</p>
<li>FAQ</li>
</ul>
</div>
<div class="join">
<ul>
<p>Join us!</p>
<li>
Subscribe now and get a discount to our premium plan!
</li>
</ul>
</div>
<div class="copyright">(C) 2013 My Company</div>
</div>
The problem stems from the fact that floats are not contained by the footer. Try the following;
.footer {
/* height: 200px; removed to allow the footer to stretch */
overflow: hidden; /* a nice trick to contain floats */
}
http://jsfiddle.net/Hk26d/
I changed height to min-height AND changed .copyright div to
.copyright {
clear: both;
text-align: right;
margin-right: 20px;
}
So I get rid of float:right within .copyright and it worked!
hello i would like to know if it is possible to center a div without having a width. because of two different versions of a container depending from language settings with different widths i would like to center it dynamically.
margin: 0 auto;
is not working without any settings of width.
so the structure is simple:
<div id="container">
<div id="list">
<span class="up">text large</span>
<ul class="navigation">
<li>one</li>
<li>|</li>
<li>two</li>
<li>|</li>
<li>three</li>
<li>|</li>
<li>four</li>
</ul>
</div>
</div>
and the css:
.wrapper #container {
width: 960px;
clear: both;
margin: 0 auto;
}
.wrapper #container #list {
width: 420px;-->should be dynamically
margin: 0 auto; --> only works when setting width
}
.wrapper #container #list .up {
font-size: 11px;
float: left;
display: inline-block;
text-align: right;
display: inline;
}
.wrapper .navigation {
font-size: 10px;
margin-top: 15px;
float: left;
padding-left: 5px;
}
.wrapper .nav li {
float: left;
display: inline-block;
margin-left: 15px;
list-style: none;
}
so if there is someone who knows how to deal with that i really would appreciate.
thanks alot.
UPDATE:
thanks for answering this question for so far. using:
display: inline-block;
on that container that should be centered works great.
Use display: inline-block. See fiddle
.wrapper #container {
/* ... */
text-align: center;
}
.wrapper #container #list {
display: inline-block;
}