I have perfectly working code, that doesn't work how I want it to... But works.
I want to centerize instead of float
Here is the working code:
My .css:
* {
margin: 0;
padding: 0;
}
body { background: #ededed url(../images/bg.gif) repeat-x; }
p {
color: #999;
padding: 0;
margin: 10px 0;
font: 12px/18px Arial, Helvetica, sans-serif;
}
#container {
margin: auto;
width: 950px;
}
#header {
height: 302px;c
width: 950px;
float: left;
background: url(../images/header.gif) no-repeat;
}
#logo { margin-top: 60px; }
#logo h1 {
display: block;
float: left;
width: 503px;
height: 57px;
text-indent: -9999px;
}
#logo h1 a {
display: block;
width: 100%;
height: 100%;
outline: none;
background: url(../images/logo.png) no-repeat 0 0;
}
#navigation {
height: 38px;
width: 950px;
margin-top: 152px;
float: left;
}
.nav-links li {
display: inline;
padding: 3px 25px 0 0;
float: left;
}
.nav-links li a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
letter-spacing: -1px;
font: bold 14px Arial, Helvetica, sans-serif;
}
.nav-links li a:hover { color: #ff0; }
.phone-number li {
float: right;
list-style-type: none;
text-transform: capitalize;
color: #fff;
letter-spacing: -1px;
padding-top: 3px;
font: normal 14px Arial, Helvetica, sans-serif;
}
h2 {
text-transform: capitalize;
color: #666;
letter-spacing: -1px;
padding-top: 7px;
font: bold 16px Arial, Helvetica, sans-serif;
}
.content-middle p { text-align: justify; }
#content-center {
float: right;
width: 322px;
margin-top: 20px;
}
.login-top {
float: left;
height: 32px;
width: 292px;
background: url(../images/sidebar_top.png) no-repeat;
padding: 4px 15px;
}
.login-middle {
float: left;
width: 290px;
padding: 5px 15px 0 15px;
border-right: 1px solid #d3d3d3;
border-left: 1px solid #d3d3d3;
background: #fff;
}
.login-middle p { text-align: justify; }
.login-bottom {
float: left;
height: 16px;
width: 322px;
margin-bottom: 15px;
background: url(../images/sidebar_bottom.png) no-repeat;
}
#footer {
clear: both;
height: 111px;
background: url(../images/footer.gif) repeat-x bottom;
}
#footer-content {
height: 91px;
width: 950px;
padding-top: 20px;
margin: auto;
}
#footer-content p {
color: #fff;
text-align: center;
padding-top: 35px;
}
.divbuttons{text-align: center;
}
.login{width:25%;}
.button {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
-moz-border-radius:9px;
-webkit-border-radius:9px;
border-radius:9px;
border:1px solid #74b807;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #528009;
}.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
background-color:#77a809;
}.button:active {
position:relative;
top:1px;}
My Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<title>Pachonk - Home</title>
<base href="http://alex.piechowski.org/school/"></base>
<link href="css/admin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/layouts/inline.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<h1>Pachonk - Your Assignments, anywhere!</h1>
</div>
<div id="navigation">
<ul class="nav-links">
<li>home</li>
<li>our schools</li>
<li>applications</li>
<li>about us</li>
<li>contact us</li>
</ul>
<ul class="phone-number">
<li>free quotation - 0800 123 456</li>
</ul>
</div>
</div>
<div id="content-center">
<div class="login-top">
<h2>Administrator Login:</h2>
</div>
<div class="login-middle">
<p>> Email confirmation upon register theming</p>
<p>> Dynamic nav bar</p>
<p>> Contact me form active</p>
<p>> Make logout.php a json response</p>
<p>> Error checking both server side and client side registration</p>
<p>> Log in using email OR username</p>
<p>> login box display more detials</p>
<p>> Password reset</p>
<p>> include files to memory save</p>
<p>> inline noty's on login/register.</p>
<p>> clean code</p>
<p>> admin side</p>
<p>> library for logcheck/admin check</p>
</div>
<div class="login-bottom">
</div>
</div>
</div>
<div id="footer">
<div id="footer-content">
<p>© Copyright
2013
Pachonk</p>
</div>
</div>
</body>
</html>
Then I try to make by div be center by going:
#content-center {
margin-left: auto ;
margin-right: auto ;
width: 322px;
margin-top: 20px;
}
But the it messes up divs above it.
add this:
#content_center {
margin-left: auto ;
margin-right: auto ;
width: 322px;
margin-top: 20px;
clear: both;
}
No floating elements allowed on either the left or the right side (due to clear: both).
You need to remove:
margin-top: 20px;
from the #content-center as that is pushing everything in that div down.
Edit: the answer above telling you to add
clear:both;
This also works, I guess I misinterpreted your question and why you need the margin-top in the first place. Still at a complete loss as to why you need the margin-top in the first place, its really bugging me if someone wouldn't mind explaining? :)
Related
According to this answer, putting display: block; float: none; position: relative; in a selector should ensure that the margin: 0px auto trick to horizontally center an element works. This is my code for attempting to center the body within the html element:
body {
background-color: lightgray;
float: left;
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin: 0px auto;
/* Adding these last 3 doesn't seem to make a difference */
display: block;
float: none;
position: relative;
}
When I specify the pixels manually like 0px 500px, it works out fine. Does anyone know why auto doesn't seem to be working in this case?
edit: Guys, it doesn't work even when I specify the width for the body. https://jsfiddle.net/ozm2x9zx/
You have to mention width to make it center.
<style>
body {
margin: auto;
width:50%;
}
</style>
And also no need to mention px for 0(Zero) values.
You missed the 4th point in that answer your referred to:
The element must have a width that is not auto
Which was then explained in the notes:
Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".
So add a width to your body and you will see it working. Ah, but here is the catch: you are applying it to the body, not any element on the page. It works, but you will not see the effect unless you make the color of the html different from the body. Try this:
html {
background-color: red;
}
body {
background-color: lightgray;
float: left;
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin: 0 auto;
display: block;
float: none;
position: relative;
width: 70%;
}
You need to remove float, off of your body element and your container sits in the middle perfectly.
Also, there is no need to attribute the unit type, (px), on a value of zero.
Consider:
body {
background-color: lightgray;
background-image: url('../images/brushed.png');
background-repeat: repeat;
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin:0;
}
div#container {
background-color: #aaaaaa;
color: white;
width: 960px;
margin: 0 auto;
}
I just remove float:left; from body, and it is centered +
most of the time -> margin:0px auto; will work fine with display:table;
<html>
<head>
<title>My Favorite Films</title>
<link type="text/css" rel="stylesheet" href="css/site.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" />
<style>
body {
background-color: lightgray;
background-image: url('../images/brushed.png');
background-repeat: repeat;
//float: left; //removed
font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
margin: 0px auto;
width: 960px;
}
div.clear-float {
clear: both;
}
div.home-page-images {
float: left;
margin: 0px 0px 0px 25px;
}
div#container {
background-color: #aaaaaa;
color: white;
width: 960px;
}
div#footer {
background-color: gray;
margin-top: 50px;
padding: 5px 0px;
text-align: center;
}
div#header {
padding: 50px 0px;
}
div#nav {
font-family: 'Playfair Display', serif;
float: left;
text-transform: uppercase;
width: 200px;
}
div#nav a:hover, div#nav a:active {
}
div#nav a:link, div#nav a:visited {
color: white;
text-decoration: none;
}
div#nav li {
margin: 0px 0px 20px 0px;
}
div#nav ul {
list-style-type: none;
overflow: hidden;
}
h1 {
text-align: center;
}
h1.home-page-header {
color: #bf0000;
font-size: 60px;
}
img.home-page-image-row1 {
float: left;
width: 300px;
height: 175px;
margin-left: 50px;
margin-top: 50px;
}
img.home-page-image-row2 {
float: left;
width: 250px;
height: 150px;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1 class="home-page-header">My Favorite Films</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li>Home</li>
<li>Black Mirror</li>
<li>House of Cards</li>
<li>Inception</li>
<li>Interstellar</li>
<li>Stranger Things</li>
</ul>
</div>
<div class="home-page-images-row1">
<img src="images/black_mirror_cover.jpg" class="home-page-image-row1" />
<img src="images/hoc_cover.jpg" class="home-page-image-row1" />
<div class="clear-float"></div>
</div>
<div class="home-page-images-row2">
<img src="images/inception_cover.jpg" class="home-page-image-row2" />
<img src="images/interstellar_cover.jpg" class="home-page-image-row2" />
<img src="images/st_cover.jpg" class="home-page-image-row2" />
<div class="clear-float"></div>
</div>
</div>
<div class="clear-float"></div>
<div id="footer">
<h3>My Favorite Films</h3>
<h4>By James Ko</h4>
<p>Copyright © 2017 James Ko. All rights reserved.</p>
</div>
</div>
</body>
</html>
html/css newbie here.
I have done some courses on html/css and now I'm testing my knowledge by attempting to copy some websites I like. Right now I'm trying my best to make Khan Academy's front page (https://www.khanacademy.org), but I've been struggling with something.
I have an <ul> that represents the top navigation bar of the page, and now I'm trying to center their logo (<div id="ka"> that is inside the navbar as a list item) to the page but using text-align: center and margin-left: auto; & margin-right: auto doesn't seem to do anything.
Here's my code:
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
padding: 13px 38px 0px 4px;
margin-left: -8px;
}
#ka {
display: inline-block;
}
#ka-logo {
float: left;
width: 24px;
margin-left: auto;
margin-right: auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
#sign {
float: right;
margin-right: 44px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="navbar">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
<li id="sign" class="navbar-text">New user / Sign up</li>
</ul>
</body>
</html>
I have seem this question but what was suggested didn't work for me.
My question is: how do I center the logo div?
A side note: since I'm fairly new to html there could be a lot of bad practices in the code above. Tips on how to do the things I did more efficiently would be highly appreciated.
here a solution for your problem.
In CSS, flex is very usefull, take a look at:
Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My CSS
I have used flexbox for centered verically divs and set the right div.
For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.
Enjoy
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
display: flex;
align-items:center;
position:absolute;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
/**padding: 0 38px 0px 4px;**/
}
.logo {
position:absolute;
height:100%;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
.logo-container {
display:flex;
align-items:center;
pointer-events:all;
}
.logo-container .ka-logo {
width: 24px;
}
.left, .right {
display:flex;
align-items:center;
}
.left {
margin:0 10px;
}
.right {
justify-content:right;
margin:0 10px 0 auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="logo">
<div class="logo-container">
<img class="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</div>
<div class="right">
<li class="navbar-text">New user / Sign up</li>
</div>
</div>
<!--<ul class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="center">
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
</div>
<div class="right">
<li id="sign" class="navbar-text">New user / Sign up</li>
</div>
</ul>-->
</body>
</html>
In this snippet, you can see the code.
I want to put mid_left and mid_right in the same div tag mid. but I can' position mid_right right, either out of the mid tag or not in the same level as mid_left. I tried float:left and display:inline-block, but none of them are working, how could I fix it?
/* CSS Document */
body {
margin:0 auto;
padding: 0;
background: url(../img/7_092641_2_meitu_1.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 15px;
color: #E2E2E2;
line-height: 24px;
font-family: '微软雅黑';
}
.logo {
width: 400px;
hight: 380px;
margin: -610px auto 0 -40px;
position:fixed;
}
.wrapper {
width: 1100px;
height: auto !important;
margin: 0 auto;
background-color:#F7F7F7;
}
.header {
width: 1050px;
height: 100px;
margin: 0 auto;
border: 1px;
/*background-image: url(../../../Stockholm-Sweden.jpg);*/
}
.header h1 {
font-size: 40px;
font-weight: 900;
font-family: '仿宋_GB2312';
margin: 0 auto;
padding-top: 18px;
}
/*------------------ NAV ------------------------*/
.container {
width: 1090px;
height:50x;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
margin: 0 auto;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 50px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
}
ul.menu li {
list-style: none;
float:left;
height: 49px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 49px;
font-size: medium;
font-weight: bold;
color: #FFF;
font-family: '微软雅黑';
text-decoration:none;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
/*------------ slider ---------------*/
.slider_1 {
height: 400px;
width: 1090px;
margin: 20px auto 0 auto;
overflow: hidden;
}
/*----------- mid ------------------*/
.mid {
height:auto;
width:1000px;
margin:0 auto;
font-family:'仿宋_GB2312';
border: solid 1px #CCCCCC;
}
.mid a {
text-decoration: none;
}
.mid_span {
height:45px;
line-height:45px;
color:#004276;
font-size:18px;
font-weight:bold;
margin-right:6px;
}
.mid_left {
height: auto;
width: 490px;
margin: 0 auto 0 5px;
border-right: dashed #F2F2F2;
diaplay: inline-block;
}
.mid_right {
height: auto;
width: 480px;
margin: 0 10px 0 auto;
}
.mid_left_1 {
width: 100%;
height: auto;
margin: 0 auto;
}
.date {
color: #CECECE;
line-height:22px;
font-size: 12px;
}
.detail {
color:#BA2636;
}
.brif {
color:#454545;
line-height:22px;
margin-top: -5px;
}
.tittle {
height:80px;
width:1050px;
margin: 20px auto 10px auto;
text-align: center;
}
.tittle h2 {
font-family:'微软雅黑';
font-size: 24px;
font-weight: bold;
color: #292c2f;
display: inline-block;
}
.tittle_line{
background: url(../img/title_line.png) no-repeat;
width: 350px;
height: 8px;
margin: 0 10px 5px 10px;
display: inline-block;
}
footer {
width:1050px;
height:auto;
margin: 0 auto;
posion: absolute;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 10px 25px 5px 25px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
margin-left: 40px;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 12px;
margin-bottom: 5px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旅游导航</title>
<meta name="description" content="北欧旅游" />
<meta name="keywords" content="各种索引条目" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/pgwslider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div><!-- header -->
<div class="container">
<ul class="menu">
<li>HOME</li>
<li>ABOUT</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div><!--navigation -->
<div class="tittle">
<div class="tittle_line"></div>
<h2>EXAMPLE</h2><div class="tittle_line"></div>
</div><!-- tittle -->
<div class="mid">
<div class="mid_left">
<div class="mid_left_1">
<a target="_blank" href="#" title="投资移民瑞典能享受欧盟待遇吗？" class="mid_span">投资移民瑞典能享受欧盟待遇吗？</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">投资移民瑞典能享受欧盟待遇吗？获得欧盟成员国的国籍，也意味着被整个欧盟接纳，直接成为欧盟公民，享受整个欧盟范围内的各种优待，包括经商，接受教育，找工作，都能够享受欧盟优先的原则。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="一步到位获得瑞典移民身份享福利" class="mid_span">一步到位获得瑞典移民身份享福利</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">一步到位获得瑞典移民身份享福利。瑞典移民者在获得身份的同时，就能即刻享受福利，而一些国家规定则没有这么宽松，比如澳洲商业移民，在获得4年期的临时商务签证的期间，必须成功经营企业才能进一步申请转为移民，而...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="瑞典移民福利“一辈子都很幸福”" class="mid_span">瑞典移民福利“一辈子都很幸福”</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">瑞典移民申请材料有哪些，如果您计划到瑞典与您的丈夫、妻子、同居伴侣或者您的孩子或者其他近亲属长期居住，那么就应当了解申请居留许可之前要准备哪些申请材料。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="欧洲各国移民福利大比拼 " class="mid_span">欧洲各国移民福利大比拼 </a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">欧洲各国移民福利大比拼。2015年，欧洲移民政策将更加成熟稳定，也将受到市场更广泛的认可。下面就随小编来看看欧洲各国移民福利吧！看看有没有适合您的那一款。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
</div><!--mid left -->
<div class="mid_right">
23t2erse452
</div>
</div><!--mid-->
<footer class="footer-distributed"><!--footer-->
<div class="footer-left">
<h3>Feito<span>AB</span></h3>
<p class="footer-company-name">Feito AB © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Mejerigatan 29</span> Göteborg</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+1 555 123456</p>
</div>
</div>
<!--
<div class="footer-right">
<div>
<i class="fa fa-envelope"></i>
<p>support#company.com</p>
</div>
</div>
-->
<div class="footer-right">
<div class="footer-icons">
<a href="#">
<img src="img/footer/1.jpg" alt="facebook">
</a>
<img src="img/footer/2.jpg" alt="facebook">
<img src="img/footer/3.jpg" alt="linkedin">
<img src="img/footer/4.jpg" alt="mewo">
</div>
</div>
</footer><!--footer-->
</div><!--wrapper-->
</body>
</html>
set .mid position to relative, and mid_left and mid_right position to absolute. Then mid_left and mid_right will stack on top of each other, with mid_right being on top since it appears later in the HTML.
Make sure you understand how the box model works.
http://www.w3schools.com/css/css_boxmodel.asp
When you add attributes like border and padding, it effectively adds to the width of your box.
So, having a container div with 1000px, you need to make sure of 2 things:
If you want to have 2 divs inside that container with 500px width (one left, one right) ensure that your width + border + padding does not exceed the 500px limit.
When using inline-blocks, there might be the scenario where a white space renders between your two blocks, effectively pushing the 2nd one right by a few pixels. If you have control over the HTML, make sure no white spaces exist between your left and right div. If you cannot control this, you can give the containing element font-size: 0px; and then just reset your font size inside the left and right elements (for instance 16px).
adding display: inline-block; for both .mid_left and .mid_right classes works perfectly for me. Also check, if you didn't have space between these two divs.
To use your current code, make these adjustments:
Correct the spelling of display from diaplay:
.mid_left {
display: inline-block;
}
And then add display: inline-block; to .mid_right.
Here is an example: JSFiddle.
Hope this solves your issue.
you have a couple of options
flexbox . depending on browser support . if you have IE10+ then this is the way to go
display: table on parent and display: table-cell on left/right container
keep the container with the biggest height in the page flow and position: absolute the second container . then add height: 100% on the positioned container
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too
I'm trying to create a square centered page at min. 600px height. The page should expand together with the text. (Ofc.)
The page also have some picture based borders, which should follow the page. (Obviously.)
I've tried a million combinations by now, I think. The problem seems to be that the div-borders cannot auto adjust if the outer div doesn't have a fixed height. And the outer div cannot have a fixed height, due to expanding text.
It seems simple enough. And there're a lot of suggestions. (That doesn't work.) Have I done something fundamentally wrong?
Here's the page: http://bymosegaard-hillerod.dk/info.aspx
(Notice that the borders doesn't reach the bottom.)
For future reference. Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<link href="..." rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topborder"></div>
<div id="leftborder"></div>
<div id="page">
<div id="pageheadtext">...</div>
<div style="float: right; margin-top: 30px;"><img src="/media/banner.jpg"></div>
<div id="menubar" style="margin-top: 210px;">
...
</div>
<div id="sideNavigation"></div>
<div id="bodyText" style="margin-top: 20px;">
...
</div>
</div>
<div id="rightborder"></div>
<div id="bottomborder"></div>
<div id="footer">...</div>
</div>
</body>
</html>
And the stylesheet:
BODY
{
background-color: rgb(248, 248, 243);
background-image: url(/media/bodyBg.gif);
background-repeat: repeat-x;
color: rgb(102, 102, 102);
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
height: 95%;
}
H1
{
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
font-weight:normal;
}
#pageheadtext
{
margin-top: 40px;
margin-left: 35px;
font-family: Verdana, Arial;
font-size: 14px;
color: #333;
text-align: left;
}
#container
{
margin: 0 auto 0 auto;
width: 786px;
overflow: hidden;
min-height: 600px;
}
#topborder
{
background-image: url(/media/frameTopBg.png);
background-repeat: no-repeat;
display: block;
height: 8px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#leftborder
{
float: left;
background-image: url(/media/frameLeftMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: auto;
}
#page
{
background-color: white;
display: block;
float: left;
height: 100%;
margin-left: 0px;
text-align: left;
width: 760px;
}
#rightborder
{
float: right;
background-image: url(/media/frameRightMiddleBg.png);
background-repeat: repeat-y;
width: 13px;
min-height: 600px;
height: 100%;
}
#bottomborder
{
background-image: url(/media/frameBottomBg.png);
background-repeat: no-repeat;
clear: both;
display: block;
height: 13px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#menubar
{
background-image: url(/media/menubar.jpg);
background-repeat: no-repeat;
display: block;
height: 27px;
width: 760px;
}
#topmenuitem
{
color: rgb(102, 102, 102);
cursor: auto;
line-height: 24px;
outline-color: rgb(102, 102, 102);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
text-decoration: none;
}
#sideNavigation
{
float: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin-left: 35px;
margin-top: 32px;
}
#bodyText
{
float: right;
margin-right: 194px;
width: 400px;
height: 100%;
}
#footer
{
text-align: center;
}
#doctable
{
font-size: 10px;
}
Btw, the page is CMS driven, so I cannot just hack the one offending page. And I would really like to solve this in general.
Your CSS is over complicated, the HTML structure also, not to talk that the design is oldish and the font is hardly readable. And over all that you spiced it using inline styles... This will only lead to to fix a fix of a fix, and not to answer a client call to do just a simple edit / modification.
Hardly maintainable. Keep it simple.
Believe it or not this is all you need:
jsBin demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<div id="container">
<h1>Bymosegård i Hillerød</h1>
<img src="http://bymosegaard-hillerod.dk/media/banner.jpg">
<nav>
<ul>
<li>Forside</li>
<li>Info</li>
<li>Regnskaber</li>
<li>Referater</li>
<li>Kontakt</li>
</ul>
</nav>
<div id="content">
<h2>Foretningsorden, relementer mm.</h2>
<p>Foretningsorden, relementer, vedtægter mm.</p>
<p> </p>
<h3>Vedtægter</h3>
................. etc
</div>
</div>
<div id="footer">Bymosegårds Alle 3-9, 3400 Hillerød</div>
</body>
</html>
CSS:
*{ margin:0; padding:0; } /* Global reset */
body{
background:#EEEDE4;
font: 10px/1.4 Helvetica, Arial, Verdana, sans-serif;
color: #666;
}
h1, h2, h3, p, ul, ol{
margin: 7px 30px;
font-weight:200;
}
h1{
color:#333;
font-size:1.5em;
padding:25px 0
}
ul, ol { padding-left:1.4em; }
nav { background: #E9E9E9; }
nav li { display:inline-block; }
nav li a{ display:inline-block; padding:5px 15px; }
#container > img{ width:100%; }
#container{
position:relative;
margin: 15px auto;
width: 786px;
background: #fff;
padding:10px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#content{ margin:30px 100px; }
#footer{ text-align:center; }