I have a container div and 2 div's that should be the same height. #Sidebar div goes on the left where as #Content div should be to the right
whenever I add something to Sidebar it pushes down the content Div and am kind of stumped
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/2009_07.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>View Applicants</title>
<style type ="text/css">
li
{
display:inline;
background-color: #c5e8cf;
}
a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}
a.side { border-bottom: 2px solid black;
background-color: #e3e7ec;
}
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
display:inline-block;
font-size: 20px;
background-color: #e3e7ec;
border-bottom: 2px solid black;
padding-bottom: 20px;
}
label.side:hover { background-color: #dde504;}
div#header {
position: float;
background-image: url("../images/header.jpg");
background-repeat: no-repeat;
border-bottom: solid 1px #999999;
height: 97px;
Width: 1000px;
margin-left: 114px;
margin-top: 10px;
background-size: 100%;
}
div#menu {
position: float;
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-left: 115px;
padding-top:5px;
background-color: #e3f6ea;
}
#menu-content {
margin: auto;
width:100%;
background-color: #c5e8cf;
}
div#container{
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
}
div#footer { position: relative;
border: solid 2px #999999;
width: 996px;
height: 50px;
background-color: #FFFFFF;
margin-left: 115px;
}
#body { background-color: #6b86a3;}
</style>
</head>
<body id = "body" >
<div id="header"> </div>
<div id = "menu">
<div id="menu-content">
<ul>
<li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>
<li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>
</li>
<li><a class="menu" href="../images/header.jpg">View Applicants</a></li>
</ul>
</div>
</div>
<div id="container" >
<div id="sidebar">
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
</div>
<div id="content">
</div>
</div>
<div id ="footer"> </div>
</body>
</html>
slightly new to css. Thank you
This would be more common of what you want to achieve:
CSS
#container {
border: solid 1px #999999;
border-top: none;
width: 998px;
margin-top: 3px;
margin-left: 115px;
}
#sidebar {
float: left;
width: 131px;
border: 2px solid #999999;
}
#content {
float: left;
width: 131px;
border-left: 1px solid #999999;
}
.floatClear {
clear: both;
}
HTML
<html>
<head>
<title>Page</title>
</head>
<body>
<div id="container">
<div id="sidebar">
Text
</div>
<div id="content">
Text
</div>
<div class="floatClear"></div>
</div>
</body>
</html>
What practically happens here is you line up two left floating <div>'s and use a float: clear; to rule out that block-type <div>'s wrap to a newline. They will only wrap upon each other if both their widths (including padding/margin/border(left/right)) will be a bigger sum than the #container it's width.
By adding more margin-left to the #content CSS you can put it anywhere you want, as long as there is space to contain it together with the #sidebar div.
Little Extra
To avoid the classical styling where padding/border make the width of your <div> even wider, you can use the newer box-sizing feature, where all padding and border width will be pushed to the inside, instead of making the box bigger than you specified in your CSS stylesheet:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
Demo Fiddle
float: top; is wrong;
float can be only left or right;
add float:right; to your sidebar and float:left; to your container
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
float:right;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
float:left;
}
Learn Css
The max-height CSS Property should do the job.
set the max-height for both #Sidebar and #Content with equal value.
and you can add the overflow:scroll if you are expecting any of them to grow height than the max-height.
Related
I'm trying to display a nice box layout for my home page where I can add pictures or words to each box. I approached this idea with div's. All was going well until I tried to insert text into one of the middle div's (boxes). I'd love a hand because when I do that it screws up my whole orientation.
Here is my HTML:
<!DOCTYPE html>
<html lang:en>
<head>
<title>MitoGraphics | Branding and Promotions</title>
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans|Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<section id="navbar">
<ul>
<li>The Loop</li>
<li>Working With Mito</li>
<li>Promotional Solutions</li>
<li>Branding Elements</li>
</ul>
</section>
</div>
<div id="box_one"></div>
<div id="box_two"></div>
<div id="box_three"></div>
<div id="box_four"></div>
<div id="box_five"></div>
<div id="box_six"></div>
<div id="box_seven">
<P>Branding Elements</P>
<div id="box_eight"></div>
<div id="box_nine"></div>
<div id="box_ten"></div>
<div id="box_eleven"></div>
<div id="box_twelve"></div>
<div id="box_thirteen"></div>
<div id="box_fourteen"></div>
<div id="box_fifteen"></div>
<div></div>
<footer></footer>
</body>
</html>
Here is my CSS:
/****************************
NAVBAR
****************************/
#navbar {
background-color: black;
height:40px;
width:1454px;
margin-left: -30px;
margin-top: -16px;
border-bottom: 1px solid #ff0000;
}
#navbar ul {
text-decoration: none;
list-style: none;
}
#navbar ul li {
display:inline-block;
float:right;
color:white;
padding-right: 190px;
padding-top: 10px;
font-family: 'Comfortaa', cursive;
font-weight: 10;
}
#navbar ul a li:hover {
color:#000;
text-shadow: 0.1em 0.1em #fff;
font-size: 1.1em;
margin-top:-1px;
}
/****************************
HOME PAGE LAYOUT
****************************/
#box_one {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%
}
#box_two {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_three {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_four {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_five {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_six {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%;
}
#box_seven {
height:285px;
width:285px;
border: 1px solid black;
background-color: #6666cc;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
.elementbox {
}
#box_eight {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_nine {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_ten {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_eleven {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -8px;
}
#box_twelve {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_thirteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_fourteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_fifteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
Why not try some responsive CSS.
Heres an example http://jsfiddle.net/bluey/72pN4/
Obviously styling would need to be added to each section, but the desired layout should be what you require, and be more stable on more devices.
Example HTML
<div>
Header
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div>
footer
</div>
Example CSS
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 100%;
}
}
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
For more info and more CSS for various grid capabilities visit: http://www.responsivegridsystem.com/
Add vertical-align: top to your inline-elements and it should be fixed. You should also consider using a class on all of your 'boxes' so that you only have to declare the width, height, background, border, and display one time. See this reduced test case codepen http://codepen.io/the_ruther4d/pen/e1703f2d34dc7ece9cccaa8e4d360c51/
Please check this image link :
http://postimg.org/image/4iooctxxt/
As you can see, I pointed out the 3 navigation breadcrumb.
How I am able to obtain this with CSS/CSS3 and HTML. How can this be done? If it's possible, how can it be done with a background image.
Try this HTML and CSS:
<html>
<head>
<style>
body
{
margin: auto;
}
#one, #two, #three
{
position: relative;
width: 200px;
height: 40px;
float: left;
background-color: #E6E6E6;
cursor: pointer;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#one
{
border-left: 1px solid gray;
}
#one:after, #two:after, #three:after
{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #E6E6E6;
left: 100%;
top: 0px;
content: "";
z-index: 1;
}
#one:hover, #two:hover, #three:hover
{
background-color: #4DB84D;
}
#one:hover:after, #two:hover:after, #three:hover:after
{
border-left: 10px solid #4DB84D;
}
#circle, #text
{
float: left;
}
#circle
{
position: relative;
background-color: white;
color: black;
border-radius: 50%;
width: 21px;
height: 21px;
left: 15px;
top: 50%;
margin-top: -12px;
text-align: center;
border: 1px solid gray;
}
#text
{
position: relative;
left: 20px;
top: 50%;
color: black;
margin-top: -11px;
}
#one:hover #circle, #two:hover #circle, #three:hover #circle
{
background-color: #009900;
color: white;
}
#one:hover #text, #two:hover #text, #three:hover #text
{
color: black;
}
#navigation
{
padding: 40px;
position: absolute;
text-align: center;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="navigation">
<div id="one">
<div id="circle">
<b>1</b>
</div>
<div id="text">
Connect with Facebook
</div>
</div>
<div id="two">
<div id="circle">
<b>2</b>
</div>
<div id="text">
Invite friends
</div>
</div>
<div id="three">
<div id="circle">
<b>3</b>
</div>
<div id="text">
Complete Profile
</div>
</div>
</div>
</body>
</html>
You can copy and paste this to see what happens in a new html document.
You can, of course, modify it to your needs.
EDIT: This is now a full template. To see, create a new html document, copy and paste the code, and open it.
include bootstrap file to your code. example:
<ol class="breadcrumb">
<li>Home</li>
<li>Library</li>
<li class="active">Data</li>
</ol>
it will create breadcrumb
I'm trying to get a layout to look like this following:
http://i42.tinypic.com/2i8wyrk.png
I've managed to get the "content" div aligned fine with the header div, but I'm not sure how to put the nav div in there and keep it aligned properly. This is what I have so far:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style>
div#container {
position: relative;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 70%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
}
div#nav {
position: absolute;
background-color: #900;
border: 2px solid #488ed0;
width: 150px;
height: 200px;
float: left;
}
div#content {
border: 2px solid #488ed0;
background-color: #900;
width: 70%;
height: 900px;
margin: 0 auto;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
</style>
</head>
<body>
<div id = "container">
<div id="header">
<center><img src = "images/logo.png" /></center>
</div>
<br />
<div id="nav">
<center><br />
<a href='#'>Index</a><br />
<a href='#'>About</a><br />
<a href='#'>Contact</a>
</center>
</div>
<div id="content"></div>
</div>
</body>
</html>
How can I align the nav div as it is in the example mockup I made? I want to make sure the left side of 'nav' stays aligned with the header, and the right side of 'content' stays aligned with the right side of the header.
For nav I noticed that you are using position: absolute and a float: left;. While aligning might need a bit of tweaking the best solution I can think of is using float for both the nav and content. For example:
#header{
margin: 0 auto;
width: 800px;
height: 200px;
}
#container{
margin: 0 auto;
width: 800px;
height: auto;
}
#nav{
float: left;
width: 200px;
height: auto;
}
#content{
float: right;
width: 600px;
height: 500px;
}
.clear{
clear: both;
}
Of course adjust the widths, height and margins according to the spacing you would like.
<div id="header">This is my banner</div>
<div id="container">
<div id="nav">This is my navigation menu</div>
<div id="content">This is my content</div>
</div>
<div class="clear">
If you want to make sure that things stay aligned when adding a margin to the nav section use margin-right and if you want to add a margin to the content section use margin-left. Finally, if you need a space between the banner and the two section below it use margin-bottom inside the header CSS.
Here is a solution if you're looking for a liquid layout: http://jsfiddle.net/M78q4/1/
HTML
<div id="head">this</div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
div#container {
position: relative;
width: 75%;
margin: 0 auto;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 100%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div#nav {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
background-color: #900;
border: 2px solid #488ed0;
width: 24%;
height: 200px;
float: left;
margin-right: 2%;
}
div#content {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border: 2px solid #488ed0;
background-color: #900;
width: 74%;
height: 900px;
float: left;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
If you don't want it to be liquid just change the #container width to a fixed width like 800px. Adjust the margins as needed.
This should get the layout you're after: http://jsfiddle.net/WDvwP/
HTML
<div id="head"></div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
#head{
width:900px; height:100px;
background:#f00;
margin:10px auto;
}
#container{
width:900px; margin:0 auto;
}
#nav{
display:inline-block;
width:250px; height:300px;
background:#0f0;
}
#content{
display:inline-block;
width:600px; height:300px;
background:#00f;
margin:0 0 0 50px;
}
fiddle should explain the issue, but cannot see what I’m doing wrong here
here is the code:
body {
background-color: #ededed;
}
#social{
position: fixed;
top: 50px;
left: 50px;
border: thin solid #ff6600;
}
#social .facebook a {
width: 60px;
height: 60px !important;
background-color: #000000;
border: thin solid #00ff00;
}
#social .facebook a:hover {
width: 60px;
height: 60px !important;
background-color: #3B5998;
}
<style>
</head>
<body>
<div id="social">
<div class="facebook">
<a href="#">
<img src="http://poststudio.co.uk/louisbrennan/facebook.png"
width="60" height="60"/>
</a>
</div>
</div>
</body>
http://jsfiddle.net/misemefein/McmAQ/
any thoughts appreciated
Add display: block; to #social .facebook a so that it occupies the full height of its container
Example: http://jsfiddle.net/Adrift/McmAQ/4/
I have a div but i dont know how to set the css position attributes. I would like the div (nav) to be placed in the middle of the page. Then i would like to place content in the div so that the border comes around the content. Currently, the div border doesnt border anything and the content that it should border appears below the div.
HTML:
<div id='nav'>
<a id='ask' class='button' unselectable='on' style='left: 20px;' href='#'>one</a>
<a id='unanswered' class='button' unselectable='on' style='left: 120px;' href='#'>two</a>
<a id='unanswered' class='button' unselectable='on' style='left: 220px;' href='#'>three</a>
<a id='unanswered' class='button' unselectable='on' style='left: 320px;' href='#'>four</a>
CSS:
.button{
position: absolute;
top: 50px;
border: 1px solid orange;
cursor: pointer;
padding: 0px 10px 0px 10px;
}
#nav{
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
border: 1px solid gray;
width: 700px;
}
Since .button is set to position:absolute, the container div (.nav) isn't counting their height into its own.
Add a clearing div after the links:
<div style="clear:both;"></div>
This should do the trick.
Also, you don't really need to have your a elements set to position:absolute—here's my solution:
.button {
display:inline-block;
margin-top: 50px;
margin-right:80px;
border: 1px solid orange;
cursor: pointer;
padding: 0px 10px;
}
#nav {
position: relative;
margin: 0 auto;
border: 1px solid gray;
}
Example.
An alternative to Purmou's solution is to specifically set the #nav's div height in the css:
#nav
{
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
border: 1px solid gray;
width: 700px;
height: 120px;
}
Like shown in this fiddle.