I've been doing the codeacademy HTML/CSS course and understood it fine right up until the end where I had to 'Build a Resume'. I've compared my code to the example at the start of the exercise but I just can't understand why my .right class is sitting at the far right and not lining up correctly. Also the header and the footer are the same width (95%) but the footer is noticeably smaller and doesn't stretch as far across the screen as the header.
Any idea's?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
div {
border-radius: 5px;
}
#header {
width: 95%;
height: 50px;
background-color: lightblue;
position: fixed;
z-index: 1;
}
.left {
position: relative;
background-color: lightgreen;
height: 400px;
width: 20%;
float: left;
margin-top: 60px;
}
.right {
position: relative;
background-color: lightgray;
height: 400px;
width: 74%;
float: right;
margin-top: 60px;
margin-bottom: 10px;
}
#footer {
position: relative;
background-color: gray;
width: 95%;
height: 60px;
clear: both;
}
your .right is sitting at the far right because of float: right;, telling the div to float to the right until it hits something(screen/browser edge or another div). If you want it to connect snugly against your left div, try float: left;, which will float that div towards and against your existing .left div.
Related
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
This is a fairly basic HTML/CSS question, and I'm sorry I'm having to ask this here (I searched my best!). I've written the following HTML and CSS code, and while the header section is separated by a neat 20 pixels from the article and aside sections, the footer is being separated by only 10 px. In fact, irrespective of the margin I set for the footer, the separation remains 10px. What am I doing wrong?
It would be amazing if you could test this code out in a browser to see what I mean. I'm also inserting a link to a picture below of the skewed margins between the article / aside section and the footer section.
http://cl.ly/image/3M2u1L0x2C0x
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Grey Boxes</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</div>
</body>
</html>
CSS Code
#wrapper {
margin: auto;
width: 940px;
}
body {
background-color: #fafafa;
}
header {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px;
position: relative;
background-color: #c6c6c6;
}
article {
height: 740px;
width: 600px;
margin: 10px 10px;
float: left;
position: relative;
background-color: #c6c6c6;
}
/* Keep scrolling! */
aside {
height: 740px;
width: 300px;
margin: 10px 10px;
float: right;
position: relative;
background-color: #c6c6c6;
}
footer {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px; /* Why is this being ignored? */
background-color: #c6c6c6;
position: relative;
clear: both;
}
Any help will be greatly appreciated! I'm sorry if I'm not following all the community guidelines here - this is my first time posting on StackOverflow, and I'll pick things up soon! Thanks ahead! :)
You need to clear the floats before you get to the footer. Changing your HTML to this will work:
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<div style="clear:both;"></div>
<footer></footer>
</div>
I've tried several suggestions online, making my html and body tags have a height of 100% as well as a min-height of 100%. I've set my div tag as the same as well.. It just isn't expanding to the bottom of the screen.
Also I can't get a second floating div to fill 100% of the space not filled up by another div beside it. It will only fill 100% of the screen (under the other smaller div) or enough to allow for the text.
I guess it should be noted that I tried viewing in IE9 as well as Firefox 16.
<!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>
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
height: 100%;
min-height: 100%;
overflow:hidden;
}
div#topbar {
width: 100%;
height:133px;
background-image :url(bkgnd_header_tile.jpg);
}
div#logo {
width: 187px;
height: 133px;
background-image:url('headerlogo_home.jpg');
float: left;
}
div#text {
width: 1;
height: 133px;
float: right;
}
div#campuses {
height: 68px;
padding-top: 10px;
color: White;
text-align: right;
}
div#title {
height: 41px;
color: White;
text-align: right;
padding-top: 14px;
}
div#sidebar {
height: 100%;
width: 250px;
float: right;
background-color: Black;
}
div#body {
height: 100%;
width: 100%
float: right;
font-family: Segoe UI;
}
span.text {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: small;
}
span.name {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: x-large;
}
</style>
</head>
<body>
<div id="topbar">
<div id="logo"></div>
<div id="text">
<div id="campuses">
<span class="text">St. John's Campus</span>
<span class="text">Grenfell Campus</span>
<span class="text">Marine Institute</span>
<span class="text">Harlow Campus</span>
<span class="text">Distance Education</span>
</div>
<div id="title"><span class="name">Memorial Self Service</span></div>
</div>
</div>
<div id="sidebar">
</div>
<div id="body">
asdf</div>
</body>
</html>
Setting position:relative to body will take body's height into account and stretch absolutely positioned content along body completely
Note that height property specified in percentage is calculated with the respect to the containing block
or you can also try overflow:hidden; in body tag
I would try setting the position to absolute as always I had these kind of weird behaviour, the absolute came to rescue, on top of that I would also set left and top to 0
Basically, following Ravindra's suggestion, and modifying it a bit, I got this to work. I set the body with the following style settings
body {
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
and used these for my two DIV sections:
div#body {
position: relative;
height: 100%;
overflow:scroll;
}
div#sidebar {
position: fixed;
background-color : #EFEFEF;
height: 100%;
width: 300px;
overflow: hidden;
}
div#content {
height: 100%;
float: left;
margin-left: 300px;
<div id="body"></div> is a parent container for the other two div's, id="sidebar" and id="content". I did this because I also had a top bar in its own div 133px high just above the "body" div.
Here's a simple puzzle that's been frustrating me for a while today:
Consider this page markup:
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
How can I get div#content centered in the page regardless of viewport width?
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
Thanks.
Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/
HTML
<div id="page">
<div id="main">
<div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
</div>
</div>
CSS
#page {
overflow: hidden;
min-width: 200px; /*same as #mains width*/
}
#main{
position: relative;
height: 500px;
width: 200px;
margin: 0 auto;
background-color: lightgreen;
}
#extended-out {
height: 200px;
margin: 0 -100px;
background: indianred;
border: 1px solid red;
}
#extended-out img {
width: 100%; height: 100%;
}
http://jsfiddle.net/CNNcV/
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange;
margin:0px auto;
width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
Is that what you're looking for?
Add margin: auto to this,
#content { width: 750px; height: 100px; background: orange; margin: auto}
Given this HTML:
<div id="div1">
<div id="div1a"></div>
<div id="div1b"></div>
<div id="div1c"></div>
<div id="div1d"></div>
</div>
<div id="div2a"></div>
Can I get this structure using CSS display property?
Sure, it can be done with the following CSS:
/* Height of the top box. Change as needed to suit your layout */
#div1a {
height: 50px;
}
/* 3 left side boxes. Again, alter the height/width as needed. If you change
the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
width: 100px;
height: 60px;
/* This bit causes them to float to the left in a vertical row of boxes */
float: left;
clear: both;
}
/* Increased height of the last box on the left */
#div1d {
height: 200px;
}
/* Main content box on the right. min-height can be changed as needed.
The margin makes room for the 3 boxes floating down the left side.
You read its properties as margin: top right bottom left; */
#div2a {
min-height: 365px;
margin: 0 20px 0 140px;
}
/* Generic margin/padding for all <div>'s */
div {
margin: 5px;
padding: 5px;
}
/* Remove the generic margin for #div1 */
#div1 {
margin: 0;
}
Demo of it in action.
<!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>
<style type='text/css'>
.mask{
position: relative;
overflow: hidden;
margin: 0px auto;
width: 100%;
background-color: #f4f4f4
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.colleft{
position: relative;
width: 100%;
right: 84%;
background-color: #f4f4f4
}
.col1{
position: relative;
overflow: hidden;
float: left;
width: 82%;
left: 101%;
background-color: #e6e6e6
}
.col2{
position: relative;
overflow: hidden;
float: left;
width: 14%;
left: 3%;
background-color: #e6e6e6
}
.footer{
float: left;
width: 100%;
background-color: #b4caf7
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
<div class="header">
DIV1A
</div>
<div class="colleft">
<div class="col1">
DIV2A
</div>
<div class="col2">
<div id="div1b">DIV1B</div>
<div id="div1c">DIV1C</div>
<div id="div1d">DIV1D</div>
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>