When I put first and second div I made into the the main div it isnt in him, but outside under.
Please paste it in text editor and run it to see the problem and tell me what I did wrong please.
HTML
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="main">
<div id="second_div"></div>
<div id="facebook"></div>
<div id="twitter"></div>
</div>
</body>
CSS
div.main {
background-color: gray;
height: 1000px;
width: 1260px;
padding: 0px;
margin: 0px;
}
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
#second_div {
background-color: brown;
height: 280px;
width: 1150px;
border: 4px solid black;
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
overflow: hidden;
float: left;
}
#twitter {
background-color: lightblue;
height: 100px;
width: 200px;
float: left;
margin-left: 980px;
margin-top: 180px
}
#facebook {
background-color: darkblue;
height: 100px;
width: 200px;
margin-top: 20px;
margin-right: 80px;
margin-left: 980px;
}
div.main {
background-color: gray;
width: 1260px;
padding: 0px;
margin: 0px auto;
}
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
#second_div {
background-color: brown;
height: 280px;
width: 1150px;
border: 4px solid black;
display:inline-block;
verticle-align:top;
}
#twitter {
background-color: lightblue;
height: 100px;
width: 200px;
display:inline-block;
verticle-align:top;
}
#facebook {
background-color: darkblue;
height: 100px;
width: 200px;
display:inline-block;
verticle-align:top;
}
<div class="main">
<div id="second_div">
<div id="facebook"></div>
<div id="twitter"></div>
</div>
</div>
HTML
<div class="main">
<div id="second_div">
<div id="facebook"> </div>
<div id="twitter"> </div>
</div>
</div>
css
.main { background:gray; overflow:hidden; padding:50px;}
#second_div { background:brown; height:50%; overflow:hidden; border: 4px solid black; padding:20px;}
#facebook { float:left; background:darkblue; width:100px; height:150px; margin-right:20px;}
#twitter { float:left; background:lightblue; height:150px; width:150px;}
Related
I have the following html code with a div that contains 4 additional divs:
<body>
<div id="main">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
How can I access the 4 divs inside and position them on the page to my liking with css?
The layout I'm going for is something like this:
I've been trying to google this but couldn't find anything helpful.
Thanks!
With the best understanding of your question, I tried to give you an answer.
section {}
.main {
float: left;
position: absolute;
width: 400px;
height: 100%;
margin: auto 13%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.section1 {
width: 40%;
}
.section2 {
width: 40%;
}
.section1,
.section2 {
margin: 0px;
padding: 0px;
padding: 0px 5px;
float: left;
position: relative;
height: 80%;
}
.section3 {
padding: 0px;
/*border: 1px solid #cccccc;*/
float: left;
position: relative;
width: 83%;
margin: 5px 5px;
height: 20%;
}
.section1 .inner-1 {
float: left;
width: 100%;
height: 100%;
border: 1px solid #000000;
}
.section2 .inner-1 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
}
.section2 .inner-2 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
margin: 10px 0px 0px 0px;
}
.section3 .inner-1 {
width: 100%;
float: left;
border: 1px solid #000000;
width: 100%;
height: 50%;
}
<section class="main">
<section class="section1">
<div class="inner-1">
</div>
</section>
<section class="section2">
<div class="inner-1"></div>
<div class="inner-2"></div>
</section>
<section class="section3">
<div class="inner-1"></div>
</section>
</section>
Hope it may helpful to you.
The top picture shows what it turns out for me, and the bottom one shows how it is supposed to be. So what I need help with is to properly place the white "box".
Here the image: http://imgur.com/a/HSAh5
My Code
div {
border: solid 1px black;
}
#div1 {
background-color: Silver;
height: 300px;
width: 100px;
margin-bottom: 5px;
}
.ruta {
background-color: white;
height: 200px;
width: 400px;
margin-left: 120px;
}
#div2 {
background-color: Black;
width: 402px;
height: 10px;
align-top:5px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="stylesheet.css">
<head>
<title>Page Title</title>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
And here is the original code which we are supposed to edit. The blank spaces is what should be filled in.
________
{
border: solid 1px black;
}
_______
{
background-color: Silver;
height: 300px;
width: 100px;
________________________
}
_______
{
background-color: White;
height: 200px;
width: 400px;
margin-left: 120px;
}
_______
{ background-color: Black;
width: 402px;
height: 10px;
margin-top: 5px;
________________________
}
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
div
{
border: solid 1px black;
}
#div1
{
background-color: Silver;
height: 300px;
width: 100px;
float:left;//this will align your sidebar to left and clear aditional space
}
.ruta
{
background-color: White;
height: 200px;
width: 400px;
margin-left: 120px;
}
#div2
{
background-color: Black;
width: 402px;
height: 10px;
margin-top: 5px;
clear:both;//added
}
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
you can do it in several ways.this is one of it.try this
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div#div1{
width: 100px;
height: 300px;
background-color: Silver;
border:1px solid black;
margin: 10px;
}
div.ruta{
width: 400px;
height: 200px;
background-color: white;
margin: 10px;
border: 1px solid black;
position: absolute;
left: 120px;
top: 0;
margin-top: 10px;
}
div#div2{
width: 402px;
height: 10px;
background-color: black;
clear: both;
position: absolute;
top: 310px;
margin: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
This is another way
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div#div1{
width: 100px;
height: 300px;
background-color: Silver;
border:1px solid black;
margin: 10px;
float: left;
}
div.ruta{
width: 400px;
height: 200px;
background-color: white;
margin: 10px;
border: 1px solid black;
float: left;
}
div#div2{
width: 402px;
height: 10px;
background-color: black;
clear: both;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
This is third way with only using margin propery without float or position properties
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div#div1{
width: 100px;
height: 300px;
background-color: Silver;
border:1px solid black;
margin: 10px;
}
div.ruta{
width: 400px;
height: 200px;
background-color: white;
margin: 10px;
border: 1px solid black;
margin-top: -310px;
margin-left: 120px;
}
div#div2{
width: 402px;
height: 10px;
background-color: black;
margin-left: 10px;
margin-top: 110px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
For some reason, I can't figure out why there is like an 8px spacing below this image within a div. check it out:
If you look at the bottom of the image, there's about an 8px space, how can i get rid of it?
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
<!----HTML BELOW---->
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
Here's the entire code, if anyone needs it:
body {
background-image: url('images/bg.png');
background-color: #5a6a7a;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
.wrap {
width: 960px;
margin: auto;
}
.head {
width: 960px;
height: 60px;
margin-top: 33px;
}
.head img {
float: left;
}
.head .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.head .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.head .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.head .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.head .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.head .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.head .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }
.head .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.head .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.head .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.head .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.head .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.head .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }
.logo {
background-image: url('images/logo.png');
width:250px;
height: 110px;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin: -85px auto;
z-index: 1;
}
.main {
margin-top: 40px;
float: left;
clear: both;
}
* {
margin: 0;
padding: 0;
}
.mainhead {
background-image: url('images/content.jpg');
height: 27px;
width: 680px;
}
.maincont {
background-color: #394d49;
width: 668px;
border: 1px solid #6b958b;
margin-top: -1px;
height: auto;
word-wrap: break-word;
padding: 5px;
}
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
.footer {
background-image: url('images/footer.jpg');
width: 960px;
height: 19px;
margin-top: 20px;
font-size: 11.6px;
font-family: 'MS Serif';
text-align: center;
color: #dfd591;
text-shadow: 0 1px 2px black;
line-height: 19px;
}
__
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
<div style="position:relative;">
<div class="logo"></div>
</div>
<div class="head">
<div class="home"><img></div>
<div class="register"><img></div>
<div class="forum"><img></div>
<div class="banner"><img></div>
<div class="chat"><img></div>
<div class="downloads"><img></div>
<div class="donate"><img></div>
</div>
<div class="main">
<div class="mainhead"></div>
<div class="maincont">
</div>
</div>
<div class="side">
<div class="sidehead"><img src="images/servinfo.jpg"></div>
<div class="sidecont">asdf</div>
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
<div class="sidehead"><img src="images/partners.jpg"></div>
<div class="sidecont">
<center><img src="images/epvp.jpg"></center>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer"></div>
</div>
</body>
An image is an inline element, which means that it is placed on the baseline of the text. There is space below the baseline in a text block, for characters with descenders like p and g. It's that space that creates the spacing below the image.
You can make the image a block element to avoid that space, and don't use the deprecated center tag, use margins to center the image:
HTML:
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
Add to the CSS:
.sidecont img { display: block; margin: 0 auto; }
no tag center <!doctype html> html5
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
.sidecont {
margin: 0 auto;
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
}
the layout here is a template for my website http://jsfiddle.net/QvFV8/12/ as you can see the content overflows the footer.
It works fine for when there is only a small amount of content, which is what I want.
I've tried clear both in the 1st footer section, but this has no effect
How can the page be stretched so that the footer remains at the bottom, regardless of the amount of content (some pages will have more or less content then others)
<body>
<div class="container">
<div class="header">
<div class="headerleft">
<div class="headerleftcon">leftcon</div>
</div>
<div class="headerright">
<div class="headerrightcon">rightcon</div>
</div>
<div class="header-content">Header
</div>
</div>
<div class="body">
<div class="left-sidebar">
<div class="left-content">left sidebar</div>
</div>
<div class="right-sidebar">
<div class="right-content">right sidebar</div>
</div>
<div class="content">Content 1
<div class="centerbox">
<div class="centerboxcontent">Center box <br> </div>
</div>Content 2 <br> Content 2 <br>Content 2 <br>Content 2 <br>Content 2
bla bla bla
</div>
</div>
<div class="footer">
<div class="footerleft">
<div class="footerleftcon">botleftcon</div>
</div>
<div class="footerright">
<div class="footerrightcon">botrightcon</div>
</div>
<div class="footer-content">Footer</div>
</div>
</div>
</body>
The css is as follows
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;}
.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;}
.header-content{
padding: 20px;
text-align: center;}
.headerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.headerleftcon{
padding: 0px 0px 0px 0px;}
.headerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.headerrightcon{
padding: 0px 0px 0px 0px;}
.footer-content{
padding: 20px;
text-align: center;}
.container{
height: 100%;}
.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;}
.content{
padding: 80px 0px 0px 0px;}
.left-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: left;
clear: both;}
.right-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: right;}
.centerbox{
height:100px;
background-color: blue;}
.centerboxcontent{
padding: 0px 0px 0px 0px;}
.right-content{
padding: 80px 0px 0px 0px;
text-align: right;}
.left-content{
padding: 80px 0px 0px 0px;}
.footer{
clear:both;}
.footerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.footerleftcon{
padding: 0px 0px 0px 0px;}
.footerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.footerrightcon{
padding: 0px 0px 0px 0px;}
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
.header, .footer {
height: 80px;
background-color: #EFEFEF;
}
.header-content {
padding: 20px;
text-align: center;
}
.headerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.headerleftcon {
padding: 0px 0px 0px 0px;
}
.headerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.headerrightcon {
padding: 0px 0px 0px 0px;
}
.footer-content {
padding: 20px;
text-align: center;
}
.container {
width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
}
.body {
background-color: #C7DFFA;
overflow: hidden;
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.content {
margin-right: 50px;
margin-left: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 80px;
}
.left-sidebar {
background-color: gray;
width: 50px;
float: left;
}
.right-sidebar {
background-color: gray;
width: 50px;
float: right;
}
.left-sidebar, .right-sidebar {
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.centerbox {
background-color: blue;
}
.centerboxcontent {
padding: 0px 0px 0px 0px;
}
.right-content {
text-align: right;
}
.left-content {
}
.footer {
clear:both;
position: absolute;
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
}
.footerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.footerleftcon {
padding: 0px 0px 0px 0px;
}
.footerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.footerrightcon {
padding: 0px 0px 0px 0px;
}
I understand that getting the footer of a website is somewhat harder than anything else, but i don't know how many more questions i have to see about this, its simply a call for learning CSS, now here are two fiddles that i have made before for the same question
So, what you have to do is make sure your footer is absolutely at the bottom of your container, so to do that you need to make your container position:relative; and 100% height of the content Also the container has to have a padding bottom that is the height of the footer . that's it really
http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
The duplicate question is here
How do I make sure that my footer shows all the way at end of the page rather than in the middle?
here is some example code
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
Whenever I try to add margin-top: 30px to my box_1 and box_2 <div>, my bottom <div> gets pushed down and disappears. It seems like my wrapper wont expand to fit the content.
How do I get a 30px gap between top and box_1/2 and bottom?
<html>
<head>
<title>Circle Motion</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="outer-wrapper">
<div id="wrapper">
<div id="top">
</div>
<div id="box_1">
<img src="chrome_400x400.png" />
</div>
<div id="box_2">
<img src="firefox_400x400.png" />
</div>
<div id="bottom">
<p>All Rights Reserved - CSS_maniac 2012 ©</p>
</div>
</div>
</div>
</body>
</html>
CSS
/* My CSS */
html {
height: 100%
}
body {
background-color: grey;
}
#outer-wrapper {
height: 100%;
width: 1000px;
margin: 0px auto;
background-color: #EAFFDB;
-moz-border-radius: 15px;
border-radius: 15px;
}
#wrapper {
height: 100%;
width: 960px;
margin: 0px auto;
background-color: #EAFFDB;
overflow: hidden;
}
#top {
width: 900px;
height: 110px;
margin-top: 35px;
margin-left: 30px;
margin-right: 30px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
}
#box_1 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:left;
margin-left: 30px;
text-align: center;
}
#box_2 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:right;
margin-right: 30px;
text-align: center;
}
#box_1 img {
margin: 15px 0px;
}
#box_2 img {
margin: 15px 0px;
}
#bottom {
width: 900px;
margin: 0px auto 0px auto;
text-align: center;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
clear:both;
}
/* Classes */
.clear {
clear: both;
}
I've tweaked your code a little bit for you:
http://jsfiddle.net/83RZc/