I have a div that has a image that will stretch with the browser. I have a div that's a logo when the wrapper div(image) is shrunk the div should stay centered but its off to one side . I used left:42%; to center. It its fine when big just when u shrink it goes off to one side..
Do I have any other options besides left:42%;? margin: 0 auto; did not work...
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
margin-left:10px;
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:42%;
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Use left: 50% with transform: translateX(-50%) to center an absolutely positioned element horizontally. Also remove the left margin so it's truly centered.
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
/* margin-left:10px; */
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:50%;
transform: translateX(-50%);
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Related
edit: Thanks to you awesome people the webpage finally looks awesome!
I couldn't choose the best answer because all of them helped me a lot :p
here's the result if anyone's interested http://i.imgur.com/RABpT9u.png
I'm trying to make a simple website with a site "logo" on the top, a navbar on the left, content in the center and some footer at the bottom.
At the same time I'm trying to make it responsive, which, obviously isn't a job for me yet :D
I'm pretty new to html and css so any advice would help a ton!
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
max-width:100%;
background-color:grey;
border: 2px solid green;
}
footer {
width:100%;
margin-top:auto;
border: 2px dashed red;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
<footer>
<h1>footer</h1>
</footer>
</main>
</body>
</html>
You can try use;
width:100vw;
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
background-color:grey;
border: 2px solid green;
width:86vw;
}
footer {
position: absolute;
width:100%;
border: 2px dashed red;
bottom:0;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
</main>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
I'm not sure if this is exactly what you're looking for, but have you tried using the flex property?
try to have a look here, see if this is what you're looking for https://jsfiddle.net/jg2sjrL5/4/
<div id="container">
<div id="navigation">navigation</div>
<div id="content"></p>content</p></p>content</p></p>content</p>
</p>content</p></div>
</div>
<div id="footer">footer</div>
html, body {width: 100vw, height: 100vh}
#container {
display:flex;
align-items: center;
flex-direction:row;}
#main, #footer {
width: 100vw;
}
#main{
display: flex;
flex-direction: row;
}
#content {
background-color:red;
width: 80vw;
}
#navigation {
background-color:white;
width: 20vw;
}
#footer {
background-color:green;
}
you can eventually set the height of the different elements with vh to make them fit your page
Here's some guidance. Hope it helps.
html {
box-sizing: border-box; /* 1 */
height: 100%; /* 2 */
}
*, *:before, *:after {
box-sizing: inherit; /* 1 */
}
body {
margin: 0; /* 3 */
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
border: 0.5vw ridge #888;
background: linear-gradient(to right, #123, #368, #48A, #59B, #48A, #368, #123);
text-align: center;
font-size: 1.4vw;
}
header h1, h2 {
color: #DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main { /* 4 */
flex: 1; /* consume remaining space in column */
display: flex;
background-color: #DDD;
border: 2px solid #F0F;
}
nav {
background: linear-gradient(90deg, #5BF, #29E);
border: 0.5vw ridge #888;
}
nav ul {
margin: 0;
padding: 0.5vw;
list-style-type: none;
}
nav li {
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border: 0.2vw outset white;
border-radius: 0.5vw;
background: linear-gradient(180deg, #AAA 60%, #777);
}
nav a {
margin: 0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration: none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
flex: 1; /* consume remaining space in row */
background-color: grey;
border: 2px solid green;
}
footer {
border: 2px dashed red;
}
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome</li>
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<div id="content">
<h1>Content Content Content</h1>
<h1>Content Content Content</h1>
</div>
</main>
<footer>
<h1>footer</h1>
</footer>
https://css-tricks.com/box-sizing/
https://stackoverflow.com/a/31728799/3597276
https://stackoverflow.com/a/36219088/3597276
https://stackoverflow.com/a/35820454/3597276
Note that in your original code you made use of CSS positioning and floats, and the HTML <center> element. You don't need position: absolute, position: relative or float: left to make this layout work when you have flexbox. And the <center> element is being phased out. You shouldn't use it and you don't need it.
Hey all and thanks for taking the time to read,
I'm trying to create my online portfilo. I would like the navigation bar to have about a 10% margin from the top of the page. However, when I try a vertical scroll bar is added to the browser. I feel like this is something to do with setting the body, html to 100%. However, I'm not sure why the navigation bar isn't just applying that top margin to the content div its in instead of the whole page. All the other elements in the content div work fine.
-----------------------------------------------------------------------------
Below is my Code.
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
margin-top: 10%;
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
This is my first time posting on stackoverflow so sorry if I have posted this incorrectly or unclearly. Please advise me if so. Thanks again for your time.
Nevermind I solved it, I just placed a div with a height of 10% at the top of the page. Thanks anyway.
If you prefer not to add the extra div you could do the following: Remove the margin from the nav_bar and instead add a padding-top of 10% to the #content div, in combination with box-sizing: border-box you will no longer get the scroll bar.
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
box-sizing: border-box;
padding-top: 10%;
}
I believe collapsing margins are the reason for the behaviour you're seeing. Essentially, if you have an child element with a top margin within a parent element without a top border or any top padding, the child's margin will be applied to the parent element.
Notice how you don't see any red in the below snippet.
body {
background: #ccc;
padding: 20px;
margin: 0;
}
.parent {
background: red;
}
.child {
background: green;
margin-top: 50px;
}
<html>
<body>
<div class="parent">
<div class="child">
Hello!
</div>
</div>
</body>
</html>
How I'd approach the problem is to remove the top-margin on the navbar completely and add 10% padding-top to the body. You can use box-sizing: border-box to make the height declaration of 100% inclusive of padding:
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
body {
padding-top: 10%;
box-sizing: border-box;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
Background: I am creating a chat-room page in html/css. The div rm-container contains an area where messages are displayed(div class rm-messages), an area to input the message, as well as a div which contains all the users currently in the chatroom (rm-users).
Problem: I would like rm-users to be on the top right of rm-container, but I am unable to get it to work. I followed the tutorial on positioning from w3schools and in my css, changing rm-container position to relative, and rm-users position to absolute, yet I am unable to get the desired result. Instead, what I get is rm-users it is below rm-messages, as would be expected if the default position had not been changed. I have attached both the css and html files below.
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
background-color: #F0F0E6;
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0
}
.rm-name {
font-size: 20px;
margin-left:auto;
margin-right:auto;
margin-top:15px;
text-align:center;
max-width:100px;
}
.userbox {
border: 1px solid black;
max-width:300px;
padding-bottom:50px;
margin-left:15px;
margin-top:15px;
}
.rm-container {
position:relative;
background-color: white;
border: 1px groove black;
margin-left:auto;
margin-right: auto;
margin-top: 40px;
max-width: 1000px;
padding-bottom: 100px
}
.rm-messages {
position:static;
border: 1px groove black;
margin-top:10px;
max-width: 700px;
margin-left:15px;
height:400px;
}
.rm-users {
position:absolute;
margin-top: 15px;
border: 1px groove black;
margin-right: 15px;
width: 200px;
height: 50px;
overflow-y: scroll;
overflow-x: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>room-name</title>
<link rel="stylesheet" href="../public/css/room.css">
</head>
<body>
<img src="something" class="chat_room_pic">
<div class="rm-userbox">
<img src="something" class="userPic">
<h3 class="userName">Username | more chatrooms</h3>
</div>
<div class="rm-container">
<div id="rm-name"> room-name </div>
<div class="rm-messages">
<ul class="messages">
<li>
<div class="msgbox">
<div class="pic"><img src="something>">Username </div>
<div class="msg"><p>Hello there!</p></div>
</div>
</li>
</ul>
</div>
<div class="rm-users">
<ul class="users">
<li><img src="something">
</div>
</div>
</body>
</html>
Just add top: -70px to .rm-users
.rm-users {
border: 1px groove black;
height: 50px;
margin-right: 15px;
margin-top: 15px;
overflow: scroll;
position: absolute;
top: -70px;
width: 200px;
}
Hi there I've been doing research on the site for some time now and i haven't been able to find an answer that correct my problem. I'm looking to expand my body div to fill 100% while maintaining my footer at the bottom of my page. As you'll see in my code the footer is a bit problematic since I'm using a "Banner" and below the contact info for the site. (See provided image).Anyway I've tried some solutions found on other questions but i haven't been able to apply the solution to my code correctly. If someone could point me in the right direction id deeply appreciate it. Also id like to maintain the code with html and css only if at all possible.
The page should not be scrollable on regular sized displays as i have very little content
to put on the website.Here i have provided a jsfiddle to further illustrate my problem. On it you'll see that what i want is my body(green) to dinamically change height to always fill the screen. taking into account that my footer(blue) should also be displayed on screen as well.
[My JSFiddle]http://jsfiddle.net/yuyocollores/3aJBP/2/
Here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Fri, 30 May 2014 18:35:33 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Some Title</title>
<link href="gr.css" rel="stylesheet" type="text/css"></link>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body id="htmlbody">
<div id="container">
<div id="header">
<img src="images/bigLOGO.png" />
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div id="body">
<img src="images/homeCONTENT.png" id="homecontent">
<p id="hometext">
Some Slogan text
</p>
</div>
</div>
<div id="footerImageBanner">
<img src="images/LogoVersion2Small.png" />
</div>
<div id="footercontainer">
<p id="footertextsmall">
Address:
<span id="footertextsmall">Some address</span>
</p>
<p id="footertextsmall">
Copyright
<span id="footertextsmall">#2014</span>
</p>
<p id="footertextsmall">
Phone:
<span id="footertextsmall">(xxx)xxx-xxxx</span>
</p>
</div>
</body>
</html>
And here is my current CSS
#htmlbody{
margin:0px;
padding:0px;
background-color:#000000;
}
#container
{
width: 100%;
min-width:500px;
height: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
}
#header
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 100px;
background-image: url('images/headerBG.png');
background-size: auto;
display: block;
}
#header img
{
display: block;
margin-left: auto;
margin-right: auto;
}
#nav
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 54px;
background-image: url('images/navbarBG.png');
background-repeat: repeat-x;
text-align: center;
}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav li
{
margin: 0px;
padding: 0px;
float: left;
}
#nav a
{
margin: 0px;
padding-right:6px;
padding-left:-3px;
width: 114px;
height: 50px;
background-image: url('images/btn.png');
background-repeat: no-repeat;
text-decoration: none;
text-transform: uppercase;
text-align:center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
text-shadow: 2px 2px 2px #333333;
}
#nav a:hover
{
background-image:url('images/btnHover.png');
}
#body
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height:auto;
min-height:500px;
background-image: url('images/contentBG.png');
background-repeat: repeat;
overflow:auto;
}
#homecontent
{
width: 100%;
min-width:500px;
height: auto;
margin-top: 40px;
margin-bottom:0px;
}
#hometext
{
padding:0px;
margin-top:20px;
margin-bottom:0px;
text-transform: uppercase;
color: #cccccc;
text-shadow: 2px 2px 5px #000000;
font-size: 165%;
font: arial;
text-align: center;
}
#hometextsmall
{
color: #cc9966;
text-align: center;
font-size: x-large;
}
#contactcontent{
width:720px;
height:400px;
min-height:400px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent
{
width:550px;
height:450px;
min-height:450px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent ul {
list-style-type: none;
padding-left:20px;
margin: 0px;
}
#pagecontent ul li {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
#pagecontenttext{
margin: 0px;
padding: 0px;
color: #131010;
font: arial;
font-size:18px;
}
#contact{
float:left;
display:block;
width:350px;
height:400px;
margin-left:auto;
margin-right:auto;
}
#footercontainer
{
margin:0px;
padding: 0px;
width: 100%;
height:auto;
display: table;
table-layout: fixed;
background-image: url('images/footerBG.png');
background-repeat: repeat;
}
#footercontainer p
{
margin:0px;
padding: 0px;
display: table-cell;
text-align: center;
margin: 0px;
padding: 0px;
vertical-align: top;
}
#footertextsmall
{
margin: 0px;
padding: 0px;
color: #ffffff;
text-align: center;
font-size:small;
}
#footerImageBanner
{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background-image: url('images/footerImgBG.png');
background-size: auto;
display: block;
}
#footerImageBanner img
{
display: block;
margin-left: auto;
margin-right: auto;
}
hey do you mean......
#container div{
background-color:#fff;
margin:10px;
}
http://jsfiddle.net/kisspa/QFN9U/
I have been recently designing some content which needs to be side by side and have the height automatically resize, but the height doesn't resize. The div doesn't expand to the size of the items inside of it. Is there a way to allow the div to expand to the size of the elements inside of it?
CSS
* {
padding: 0px;
margin: 0px;
}
body {
font-family: 'Metrophobic', sans-serif;
background-color: #c5c5c5;
background-image: url('../images/noise.png');
}
#container {
width:900px;
background-color: #dbdbdb;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 0px 0px 5px black;
}
.center_align {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#header {
height:80px;
font-size: 60px;
padding: 10px;
text-align: center;
}
#menu {
width:900px;
height:50px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cacaca;
}
.menu_link {
width:224px;
height:50px;
text-align: center;
font-size: 35px;
float: left;
opacity: 0.3;
background-color: #cacaca;
}
.menu_divider {
width: 1px;
height: 50px;
background-color: #dbdbdb;
float:left;
}
#content {
width: 900px;
height: auto;
padding: 10px;
font-size: 20px;
height: auto;
}
.line_container {
margin-top:5px;
margin-bottom:5px;
}
#footer {
width:900px;
height:22px;
padding-top:2px;
text-align: center;
font-size: 14px;
color:black;
}
a:link {
color:black;
text-decoration: none;
}
a:visited {
color:black;
text-decoration: none;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}
a.link:link {
color:#21525e;
}
a.link:visited {
color:#21525e;
}
a.link:hover {
color:#307f91;
text-decoration: underline;
}
a.link:active {
color:#307f91;
text-decoration: underline;
}
HTML
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
width:100px;
height:100px;
border: 3px solid white;
border-radius:25px;
margin-left:10px;
margin-right:10px;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="center_align">
<img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
<div style="height:80px;float:left;">Title</div>
</div>
</div>
<div id="menu">
Home
<div class="menu_divider"></div>
Tutorials
<div class="menu_divider"></div>
About
<div class="menu_divider"></div>
Contact
</div>
<div id="content">
<div style="width:900px;">
<div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
</div>
</div>
<div id="footer">
© Cameron
</div>
</div>
</body>
</html>
Looks like the problem is that the #footer element isn't properly cleared. Add clear: both; to #footer. This pushes the cleared element below the floated elements, and should functionally result in the same visual fix.
The "container div" basically "forgets" that it is the container for them, so simply add an overflow:auto; to make it remember.
I also tend to add zoom:1 for IE.
The problem is that you are floating elements, and that causes problems with wrapping divs per default (pretty much...).
Here is a working solution, where overflow:hidden is added to the wrapping div: http://jsfiddle.net/s2dxw/2/
The float issue is pretty confusing, and has had a couple of solutions in the past. Here's a good read regarding floats in HTML: http://css-tricks.com/all-about-floats/
Alternatively, you can put some element with the rule clear: both; inside and at the end of the wrapping div.