I am having trouble vertically centering my labels/fields in my form. I have centered the content horizontally but now would also like to add vertical centering. When I run my code i can see that the fieldset padding is off. The value of the padding on the top is less than the value on the bottom. I figure for the vertical centering to occur they should be equal. Here is my code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="contact.css">
</head>
<body>
<header id="pageHeader">
</header>
<nav class="mainNav">
<ul>
<li>Home</li>
<li>Photos</li>
<li>About</li>
<li>Contact</li>
</ul>
<img src="NewLogo3.png">
</nav>
<div class="contact">
<h1>Get In Touch</h1>
<form action="index.php" method="POST" >
<fieldset class="boxShadow">
<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name" class="boxShadow"/>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter your email address" class="boxShadow"/>
<label>Message:</label>
<textarea name="message" placeholder="What's on your mind?" class="boxShadow"></textarea>
<input type="submit" value="Send message" />
</fieldset>
</form>
</div>
<footer id="pageFooter">
<p>Thanks for visiting my website</p>
<span>© 2013</span>
</footer>
</body>
</html>
html, body, h1, h2 , ul, nav, img{
margin:0;
padding: 0;
font-size: 1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
body{
background: #777777;
height: 100%;
}
nav{
background: #40B3DF;
height: 100px;
font-size: 2em;
width: 100%;
border-bottom: 1px solid black;
}
nav ul{
position: absolute;
top: 55px;
white-space:nowrap;
margin-left: 100px;
}
nav li{
display: inline-block;
background: #A8CB17;
padding-bottom: 0;
border-radius: 8px 8px 0 0;
border-bottom: 2px solid #A8CB17;
margin-right: 10px;
-webkit-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
}
nav a{
text-decoration:none;
color: #004158;
padding: 10px;
}
nav img{
position: absolute;
right: 50px;
top: 15px;
}
nav li:hover{
background: #17649A;
border-bottom: 2px solid #17649A;
}
p{
padding-top: 3em;
color: #454545;
text-align: center;
}
h1{
color: #393939;
font-size: 3em;
padding: 1em 0 0 1em;
text-shadow: 2px 2px 3px rgba(23, 23, 23, 1);
margin-bottom: 1em;
}
footer{
border-top: 2px solid #393939;
background: #40B3DF;
position:relative;
bottom:0;
height: 60px;
width: 100%;
text-align: center;
}
footer p{
display:inline-block;
margin: 0 auto;
padding-top: 1.5em;
color: #004158;
}
footer span{
position: relative;
top: 7px;
right: -45px;
}
textarea{
height: 150px;
width: 200px;
padding: 1em;
}
label, input[type=submit]{
text-transform: uppercase;
}
input, label{
display: block;
margin: 0 auto;
padding: 1em;
width: 200px;
}
input[type=submit] {
margin-top: 2em;
border-radius: 8px;
font-weight: 700;
}
fieldset {
height: 550px;
position: relative;
width: 60%;
text-align: center;
background: #676767;
margin: 0 auto;
margin-bottom: 2em;
/*border: 0;*/
}
The gap at the bottom of the form is due to the fact that your fieldset has a height of 550px, but your content does not fill that height. Remove the height, and adjust margin/padding from there.
As for the padding on the fieldset, browsers add padding to fieldsets by default. To make your site more consistent across browsers, use a CSS reset, like the HTML5 reset style sheet. That essentially overrides all of a browser's default styling. When using it, apply it above all of your other CSS styles. As for the padding itself, there are a few ways to manage it.
To adjust a certain side, you can use padding-top, padding-bottom, padding-right, or padding-left.
You can adjust top/bottom, left/right using padding: 10px 15px;, which would give you 10px on top and bottom, and 15px on the left and right.
You can also specify top, left/right, and bottom with padding:10px 15px 5px.
Margins are set the same way, just replace "padding" with "margin".
Related
I am having an issue with resizing and a div. When I resize the browser, then scroll over to the right, I see that the bottom div is not extending all the way despite my width at 100% I have tried position and width tags and am at a loss. Any ideas? The form is moving into the white space and not sticking to the background div area.
https://codepen.io/CaptainMattyP/pen/mdJRKpo
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
}
#footer-info1 {
color: white;
padding: 80px 0px 0px 150px;
positon: absolute;
}
#copyright {
color: white;
padding: 0px 0px 0px 900px;
positon: absolute;
}
#contact-info {
padding: 20px 10vw 0px 1600px;
position: absolute;
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
</section>
</main>
I'm going to take a guess here that you have a very wide monitor that you are doing most of your work on. You have hard coded almost all of the padding and margins used in your code to place the different items on the page. This is the root of your problem. When you put something to width: 100% what is actually occurring is you are telling the browser to give a width of 100% of the current screen size. This means it will be subjective to the size of the browser that is displaying the page. The rest of your padding and margins though are set to a hard pixel value. Combine these two different display styles together and you can have a page that displays different portions off of the initial screen.
I think you might want something closer to this. I do still use hard coded padding values, but they are padding based on dynamic values instead of absolute values so it allows for easier reflowing and resizing of the page so it looks better for more screen sizes.
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
white-space: nowrap;
text-align: right;
padding-right: 10px;
padding-top: 10px;
margin: 0px;
}
li {
color: white;
display: inline;
padding-left: 10px;
}
#welcome-section {
padding-bottom: 40px;
text-align: center;
}
.picture {
border-radius: 50%;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
overflow: auto;
}
#footer-info1 {
color: white;
text-align: right;
padding-right: 10px;
float: right;
}
#email-section {
float: left;
padding-bottom: 10px;
padding-left: 10px;
}
.block {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="email-section">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</div>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
<div id="copyright">
#Matthew Paciello
</div>
</div>
</section>
</main>
If I'm reading this right, I suggest adjusting the bottom area and use a flex like so:
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
}
#footer-info1 {
color: white;
}
#copyright {
color: white;
}
#contact-info {
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</section>
</main>
Your footer is 100% but:
The form in your footer have a 10vw padding-right which make the page horizontally scrollabe. And that white space on your right. either bring the form more to the left by reducing the padding-left or padding-right.
The position of the image is set by margin-top and margin-left which also plays a roll in making the page horizontally off, and scrollable. You can bring the image closer to the left by reducing margin-left of it. Or use other methods to center the image, if necessary.
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
I am trying to create list items that highlight when hovered but when I use inline, it works where the list items are horizontally next to each other but when I use inline block (so I can set height and width), they get pushed vertically below each other.
Can anyone find my issue?
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/Master.css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="navBar">
<img id="imgLogo" src="Images/logo_netflix.png" />
<ul id="navBarRight">
<li id="liLogin" class="navItem"><a runat="server" href="Account/Login.aspx">Login</a></li>
<li id="liRegister" class="navItem"><a runat="server" href="Account/Register.aspx">Register</a></li>
</ul>
</div>
</form>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Css:
/* Universal */
body {
font-family: "Arial Black", Gadget, sans-serif;
background-color: #DEDEDE;
margin: 0px;
}
/* Navigation Bar */
div#navBar{
height: 50px;
margin: 0px;
background-color: #000000;
box-shadow: 3px 3px 1px #888888;
}
#imgLogo{
max-height: 100%;
max-width: 100%;
margin: 0px 0px 0px 10px;
}
ul#navBarRight{
height: 50px;
width: auto;
margin: 0px;
padding: 0px;
display: inline;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
display: inline-block;
color: black;
list-style-type: none;
height: 100%;
width: 100%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
a{
color: white;
text-decoration: none;
}
li:hover{
background-color: gray;
}
How about using float instead of inline or inline block. https://jsfiddle.net/37oseq80/2/
ul#navBarRight{
border:1px solid;
width:500px;
height: 50px;
margin: 0px;
padding: 0px;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
float:right;
color: black;
list-style-type: none;
height: 100%;
width: 40%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
And ofcourse dont forget use clear:both after the last child of the ul.
You have width: 100% in the CSS rule for li.navItem- that way the nav items will take the whole width of the parent element and get placed below each other as you describe.
Make that width smaller - try 20% (or a fixed pixel value) as a beginning and then gradually change it until it looks the way you want.
Suppose that I have a content div like this:
<div id="content">
</div>
I would like to know if it is possible with CSS to style this div to have a minimum height (let's say 700px, for example) and all the content that is placed inside this div will only stretch (making its height longer) the div if the sum of the height of its content is greater than the div's height.
I tried using the min-height attribute, but it simply didn't work. All content that I place inside the div makes it longer.
UPDATE
This is some page of my application with the css files (the id of the content div in the css files is conteudo) Unfortunatelly my code is not in English, but I think this is irrelevant. If you can spot the bug why the min-height attribute is not working:
acessonegado.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<title>Grupos de E-mail de Servidores</title>
<link href="resources/css/gruposemailservidores.css" rel="stylesheet" type="text/css" />
<link href="resources/css/layout.css" rel="stylesheet" type="text/css" />
<link href="resources/css/acessonegado.css" rel="stylesheet" type="text/css" /></head><body>
<div id="cabecalho">
<img src="resources/img/ufca.png" alt="Universidade" />
<span>Grupos de E-mail de Servidores</span>
</div>
<form id="form" name="form" method="post" action="/gruposemailservidores/acessonegado.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<div id="usuario">
<div>
ADMIN<br />UNIVERSIDADE
</div>
</div>
<div id="barraTitulo">Acesso Negado
Sair
</div>
<div id="conteudo">
<p>Este aplicativo é de uso exclusivo de servidores da</p>
<p>COORDENADORIA DE INFRAESTRUTURA DE TI</p>
</div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-8939669570174810183:-4107362002777505590" autocomplete="off" />
</form>
<div id="rodape">
<p>aaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbb</p>
</div></body>
</html>
gruposemailservidores.css
body
{
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
font-size: 70%;
}
#cabecalho
{
height: 84px;
background-color: #dde8df;
border-bottom: 1px solid #6f9b76;
}
#cabecalho img
{
position: absolute;
top: 4px;
left: 10px;
}
#cabecalho span
{
position: absolute;
top: 23px;
left: 145px;
font-family: trebuchet ms, arial, sans-serif;
font-size: 240%;
font-weight: bold;
color: rgba(0, 83, 83, 0.8);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
}
#rodape
{
font-size: 90%;
color: white;
background-color: #6f9b76;
text-align: center;
padding: 10px 0;
}
#rodape p
{
margin: 0;
}
#rodape p:first-child
{
margin-bottom: 2px;
}
input, select, textarea, button
{
font-family: inherit;
font-size: 100%;
}
input[type="submit"], input[type="button"]
{
border: 1px solid;
}
.ui-dialog
{
box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
}
.ui-dialog #iconeAlerta
{
float: left;
margin: 0 7px 10px 0;
}
.ui-dialog #emailGrupoSetor
{
font-style: italic;
}
layout.css
#form #usuario
{
position: absolute;
height: 84px;
top: 0;
margin-right: 10px;
right: 0;
font-size: 105%;
color: #608a66;
}
#form #usuario div
{
height: 84px;
display: table-cell;
vertical-align: middle;
}
#form #barraTitulo
{
color: white;
font-size: 130%;
font-weight: bold;
background-color: #6f9b76;
margin: 0;
padding: 2px 10px;
}
#form #barraTitulo a
{
float: right;
color: white;
font-size: 75%;
font-weight: normal;
text-decoration: underline;
}
#form #conteudo
{
margin: 5px 10px;
min-height: 750px;
}
acessonegado.css
#conteudo p
{
text-align: center;
font-size: 180%;
}
#conteudo p:first-of-type
{
/* Comment the margin-top attribute and the height of the #conteudo div will change. It shouldn't. */
margin-top: 150px;
margin-bottom: 10px;
}
#conteudo p:last-of-type
{
margin: 0;
color: #004182;
}
Using min-height works just fine. see fiddle: http://jsfiddle.net/1g1pdqbc/6/
div {
min-height: 100px;
background-color: blue;
width: 100px;
}
The both divs are set to min-height: 100px but the second div has extra stuff in it and makes it taller.
This might be helpful
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
</div>
<br/>
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
<div style = "min-height:100px; background-color:blue" id="content">
inner div with 100px height
</div>
<div style = "min-height:100px; background-color:green" id="content">
inner div 3 with 100px height
</div>
</div>
I have a page and a form element that I have positioned on the right side of the page, when I resize the page the form moves to the left of the page, this is very irritating and I want to keep the element fixed.
The element is <div id = "form1"> in the below code:
<center>
<div id = "text">
<p>Angus Animal Sanctuary is a small animal centre located in Birmingham, UK. Our focus is on more traditional pets like cat, dogs, rabbits and birds. The objectives of this association are to take in and re-home animals and provide a special living environment. </p>
<p>An animal adoption makes a unique gift idea for yourself or someone special and provides a valuable contribution to the running costs of Angus. With the help of our staff and volunteers we provide a special and loving atmosphere to help all our animals adapt and find permanent, loving new homes.</p>
<p>All potential adopters are interviewed and home vetted.</p>
</div>
<div id = "form1">
<form method="login" action="form1.php">
<center><h3>Login</h3></center>
<label>Email*:</label> <input type="text" name="name" size="15" maxlength="20" placeholder="abc#mail.co.uk" required value="<?php echo htmlspecialchars($email);?>"/>
<br/><div class="error"><?php if (!empty($emailErr)){echo $emailErr;}?></div>
<br/>
<label>Password*:</label> <input type="text" name="name" size="15" maxlength="20" placeholder="**********" required value="<?php echo htmlspecialchars($password);?>"/>
<br/><div class="error"><?php if (!empty($passwordErr)){echo $passwordErr;}?></div>
<br/>
<b><input style="float:right" type="Submit" name="Submit" value="Sign In"/></b>
</form>
</div>
<br/>
</center>
CSS:
#container{
width:979px;
margin:0;
padding: 0;
}
body{
min-width:947px;
}
/* change padding to increase or decrease size */
#header{
background-color:#C8C800;
margin: auto;
padding:0px 0px;
text-align: center;
height:150px;
width:950px;
border: 1px solid #999;
border-radius: 5px;
-moz-box-shadow: 0 0 100px #999;
-webkit-box-shadow: 0 0 100px #999;
box-shadow: 0 0 100px #999;
}
#form1{
margin-top:-250px;
background-color:#FBFBE8;
margin-right:190px;
float:right;
padding:0;
width:240px;
height:180px;
border:1px solid #999;
border-radius: 5px;
-moz-box-shadow: 0 0 100px #999;
-webkit-box-shadow: 0 0 100px #999;
box-shadow: 0 0 100px #999;
display:inline;
}
/* Main setting of the nav bar */
#nav{
background-color:#C8C800;
overflow:hidden;
text-align: center;
border: 1px solid #999;
border-radius: 5px;
-moz-box-shadow: 0 0 100px #999;
-webkit-box-shadow: 0 0 100px #999;
box-shadow: 0 0 100px #999;
width:950px;
text-align: left;
border:0px;
padding: 0;
margin: 0 auto;
}
/* Styling to change anything which goes on the navbar itself */
#nav ul {list-style:none;
text-align: center;
margin: 4px; /* This changes height of navbar (orange bar)*/
font-family: BOOK ANTIQUA;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#nav li {
display: inline;
}
/* Styling to change the specific button / link of navbar (li) because it is reffering to lists*/
#nav li a {
text-decoration:none;
color:#000;
padding: 20px 20px; /* This changes width and height of the buttons, edit 2nd one to increase/decrease spacing between links*/
background-color:#C8C800;
}
/* Styling to change the specific button / link of navbar */
#nav li a:hover {
color: #FFF;
background-color: black;
}
#text{
line-height:0.65cm;
width:680px;
margin-right:270px;
margin-top:-40px;
height:250px;
background-color:#FBFBE8;
border-radius: 5px;
moz-box-shadow: 0 0 100px #999;
webkit-box-shadow: 0 0 100px #999;
box-shadow: 0 0 100px #999;
}
#footer{
background-color:#C8C800;
margin-top: -20px;
border-radius: 5px;
moz-box-shadow: 0 0 100px #999;
webkit-box-shadow: 0 0 100px #999;
box-shadow: 0 0 100px #999;
width: 945px;
}
Normaly i do not do this. But since I like animals, I gave your markup a little retuch. It's not complete but i think it will help you out: http://jsfiddle.net/NicoO/Yqbg5/1/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#wrap
{
width: 950px;
margin: auto;
}
#header
{
background-color: #C8C800;
border: 1px solid #999999;
border-radius: 5px;
box-shadow: 0 0 30px #999999;
margin: auto;
padding: 75px;
text-align: center;
}
#navigation
{
display: block;
margin:20px 0px;
padding:0;
list-style: none;
text-align: center;
background-color: #C8C800;
border-radius: 5px;
border: 1px solid #999999;
box-shadow: 0 0 20px #999999;
}
#navigation > li
{
display: inline-block;
vertical-align: middle;
}
#navigation > li A
{
font-weight:bold;
font-style: italic;
display: block;
padding: 10px;
font-size: 20px;
color: #000;
text-decoration: none;
}
#navigation > li A:hover,
#navigation > li A:focus
{
background-color: #000;
color: #FFF;
}
#slideshow
{
border:1px solid black;
clear: left;
margin-bottom: 15px;
text-align: center;
background-color: white;
border-radius: 5px;
}
.box
{
background-color: #FBFBE8;
border: 1px solid #999999;
border-radius: 5px;
box-shadow: 0 0 30px #999999;
padding: 15px;
}
.claimer
{
font-size: 50px;
font-style: italic;
}
#left
{
width:71.5%;
float: left;
padding-right: 20px;
}
#right
{
margin-left: 71.5%;
}
#content:after
{
content: "";
display: table;
clear: both;
}
#footer
{
background-color: #C8C800;
border-radius: 5px;
box-shadow: 0 0 30px #999999;
margin-top: 15px;
}
h3
{
display: block;
text-align: center;
}
You will ned to change your HTML to this:
<div id="wrap">
<div id="header">
<span class="claimer">Angus Animal Sanctuary</span>
</div>
<ul id="navigation">
<li>Home</li>
<li>About us</li>
<li>Register</li>
<li>Contact us</li>
</ul>
<div id="slideshow">
<img name="slide" src="http://www.katellaclinic.com/clients/6909/images/bigstock_Group_Of_Pets_Together_In_Fron_8258872.jpg" />
</div>
<div id="content">
<div id="left">
<div class="box">
<h3>Welcome to Angus Animal Sanctuary</h3>
<p>Angus Animal Sanctuary is a small animal centre located in Birmingham, UK. Our focus is on more traditional pets like cat, dogs, rabbits and birds. The objectives of this association are to take in and re-home animals and provide a special living environment. </p>
<p>An animal adoption makes a unique gift idea for yourself or someone special and provides a valuable contribution to the running costs of Angus. With the help of our staff and volunteers we provide a special and loving atmosphere to help all our animals adapt and find permanent, loving new homes.</p>
<p>All potential adopters are interviewed and home vetted.</p>
</div>
</div>
<div id="right">
<div class="box">
<form action="form1.php" method="login">
<h3>Login</h3>
<label for="name">Email*:</label>
<input type="text" value="" required="" placeholder="abc#mail.co.uk" maxlength="20" size="15" id="name" name="name" />
<label for="password">Password*:</label>
<input type="password" value="" required="" placeholder="" maxlength="20" size="15" id="password" name="password" />
<input type="Submit" value="Sign In" name="Submit" />
</form>
</div>
</div>
</div>
<div id="footer">
<marquee><b>All Content Copyright 2014</b></marquee>
</div>
</div>
Add this to your CSS
#form1{
position:relative;
left:195px;}
It should help.
Wrap the form with a div, then add the css posion: relative to this div.