I have an issue with text from a DIV overlapping the footer section of my webpage. There are 2 DIVS side by side which are a main text area and a links section. However when I type in the left hand box it appears to overflow and fill over the footer section.
Here is a very simple example of my issue, hope someone can show where I am going wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
margin: 0px;
padding: 0px;
text-align: left;
background-color: rgb(242, 242, 242);
}
.wrapper {
width: 940px;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: 0px;
min-height: 500px;
background-color: #FFF;
}
.textarea{
width: 65%;
float: left;
height: auto;
background-color: #FFF;
min-height: 0px;
background-color:#F00;
}
#rightmenu{
padding: 0px;
width: 271px;
height: 100%;
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div>
<div class="wrapper">
<div class="textarea"> Text Area
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>This DIV overflows my footer</p>
</div>
<div id="rightmenu">
Side Menu Links
</div>
</div>
<footer>
Footer Section
</footer>
</div>
</body>
</html>
Thanks in advance
Have you tried using the clear style? Have a read here - http://css-tricks.com/the-how-and-why-of-clearing-floats/
Or using overflow good example here - http://css-tricks.com/almanac/properties/o/overflow/
On your footer, try "clear:both" in your CSS.
So:
footer{
clear:both;
}
It will make your footer clear any floated divs (move below them).
Related
The problem I'm having is regarding segmenting with divs in HTML. I have a parent div that has a border set for it with child divs placed within it (I'm creating a scoreboard for baseball as a test for nesting and layouts). However, despite the parent div containing the border, the children of the div elements are breaking out of the border as well as the divs themselves. Any ideas? Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link rel="stylesheet" href="BaseballScoreboard.css">
</head>
<body style="background-color:green;">
<div class="scoreboard">
<div>
<p id="atbat" class="text1">AT BAT</p>
<p id="atbatnum" class="num">12</p>
<p id="ball" class="text1">BALL</p>
<p id="ballnum" class="num">3</p>
<p id="strike" class="text1">STRIKE</p>
<p id="strikenum" class="num">2</p>
<p id="out" class="text1">OUT</p>
<p id="outnum" class="num">0</p>
</div>
<div>
<p id="inning" class="text2">INNING</p>
<p id="runs" class="text2">RUNS</p>
<p id="hits" class="text2">HITS</p>
<p id="errs" class="text2">ERRS</p>
</div>
<div>
<p id="visitor" class="text1">VISITOR</p>
<p id="home" class="text1">HOME</p>
</div>
</div>
</body>
</html>
...and here's the CSS:
.scoreboard{
border: 5px solid;
border-color: white;
color: white;
height: 50%;
width: 100%;
}
.text1{
font-size: 50px;
float: left;
margin-left: 25px;
}
.text2{
font-size: 50px;
float: right;
margin-left: 25px;
}
.num{
font-size: 50px;
float: left;
margin-left: 15px;
background-color: black;
padding: 5px;
}
I appreciate the help.
<!DOCTYPE HTML>
<html lang ="en">
<meta charset = "utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id = "container">
<header>
<div id = "static_nav">
<nav>
Home
About Us
Contact US
Gallery
Member Log-in
</nav>
</div>
</header>
<div id = "block_two">
<p></p>
</div>
<div id = "block_three">
<p> Block Three </p>
</div>
<div id ="block_four">
<p> Block Four </p>
</div>
</body>
<div id = "end_block">
<footer>
<p> This is where the footer would go </p>
</footer>
</div>
</div>
</html>
Here is the CSS
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}
Here is the #static_nav nothing happens when I do that. I'm not quite sure how to remedy this. I've been able to modify the other divs but I'm not to sure why I can't in this case.
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 5vh;
background-color: #000000;
position:fixed;
opacity: .75;
color:;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
Also, "text-align: right" pushes the text to the right side border. How would I add a little space between the border and text so that its not directly on the border. I tried padding and margin but it didn't move it.
Thank you for the help.
To color the links in #static_navbar, you have to style them directly. Otherwise the browsers default link color will be used:
div#static_nav a {
color: white;
}
To vertically align the links, one possibility is to use the padding of the #static_navbar on top and bottom, e.g.:
padding: 10px 0;
Also make sure, that your markup is valid. Your closing body take hast to be set directly before the closing html tag.
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}
div#static_nav {
font-family: Verdana, sans-serif;
padding: 10px 0;
text-align: right;
width: 100%;
background-color: #000000;
position: fixed;
opacity: .75;
}
div#static_nav a {
color: white;
}
div#container {
margin-top: 10px height: 10vh width: 100%;
background-color: #16BA81;
}
<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav>
Home
About Us
Contact US
Gallery
Member Log-in
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<p>Block Three</p>
</div>
<div id="block_four">
<p>Block Four</p>
</div>
<div id="end_block">
<footer>
<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
So I just can't get rid of this little additional margin between image and navi bar. Image has set to have 2% margin, but between image and navibar there´s more margin. And adding padding to the navi links as in this tutorial at 28.00 the guy sets margin: 0 auto; to nav list. That does not work for me. He uses nav with <ul> and <li> tags, I just used <nav></nav> tags and link to create menu. How to fix this margin error and move links up and down on menu bar?
CSS
body {
background-image: url('lgrey.jpg');
color: #000305;
font-size: 90%;
font-family: Arial, Georgia, Verdana;
line-height: 1.5;
text-align: left;
}
.body {
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: 25%;
height: auto;
margin: 2% 0;
}
.mainheader nav {
background-color: dimgrey;
height: 35px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin: 0 auto;
}
.mainheader nav a {
text-decoration: none;
color: white;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>responsive</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<header class="mainheader">
<img src="furnitur2.jpg">
<nav id="nav1">
Avaleht
Meist
Asukoht
Teenused
Galerii
Kontakt
</nav>
</header>
<div class="maincontent">
<div class="content">
<article class="topcontent">
<header>
<h2>First Post</h2>
</header>
<footer>
<p class="post-info">Selle posti autor on Otto Oliver Olgo</p>
</footer>
<content>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</content>
</article>
</div>
</div>
<aside class="topsidebar">
<article>
<h3>Ülemine sidebar</h3>
<p>Lorem ipsum ja nii edasi ma ei maleta mis ladina keelsed
</p>
</article>
</aside>
<aside class="bottomsidebar">
<article>
<h3>Ülemine sidebar</h3>
<p>Lorem ipsum ja nii edasi ma ei maleta mis ladina keelsed
</p>
</article>
</aside>
<footer>
<p>Copyright ©: 2015 5toneface. All Rights Reserved</p>
</footer>
</body>
</html>
The image tag is displaying inline with the content which seems to leave extra space at the bottom of it for natural padding.
If your img tag is updated to display as a block element in the css the space goes away:
.mainheader img {
width: 25%;
margin: 2% 0 0;
display: block;
}
To adjust your links you could:
.mainheader nav a {
text-decoration: none;
color: white;
/* Set line-height to same as height will center text vertically */
line-height: 35px;
/* inline block make the whole height clickable */
display: inline-block;
padding: 0 10px;
}
Hey beginner coder here:
I'm trying to achieve this: http://i.imgur.com/aVawhET.png with this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 5</title>
<style>
body{
margin-top: 25px;
margin-left: 15px;
width: 100%;
height: 100%;
}
#text{
width: 90%;
display: inline-block;
}
#text p{
word-break: break-all;
}
#image{
height: 500px;
width: 5%;
display: inline-block;
background-image: url("bakgrund.jpg");
background-repeat: repeat-y;
}
</style>
<div id="container">
<div id="text">
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
</div>
<div id="image">
</div>
</div>
but I fail and get this result: http://imgur.com/ac0nSqz what am I doing wrong? I've tried things like adding minus margin values. Why is it jumping down?
The correct answer is:
#text,
#image { vertical-align: top; }
The reason is because inline-block elements are, by default, aligned by their baselines - so the bottom of both div's are in line with each other - meaning that their will be a space at the top of the shorter div when it's placed in line with a taller div to make the bottoms of these divs line up.
CSS
body{
margin-top: 25px; ///Remove this
}
Add margin-top: 0 in body tag
I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px).
Can someone help me out?
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
and here is the html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
Any help is greatly appreciated!
Do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. Now all your resizes inside the main div should be limited to within the wrapper.
A neat little trick I just learned is making your #content position: relative; and then make all child elements inside it position: absolute; that way all child elements are absolute to your content area and the content will resize to any resolution. Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out.
Hope this does something for you.