I’m having trouble centering the divs named ‘one’ and ‘two’. They need to retain their styles exactly as they are which keep them side by side and margins but also be centered which is the bit I can’t work out?
Also the nav divs need to be centered which I have achieved with the styles below.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
float: left;
color:#95061e;
margin-bottom:10px;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
float:left;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
Use display:inline-block; instead of float:left;.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
display:inline-block;
color:#95061e;
margin-bottom:10px;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
display:inline-block;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
use this code:
#header {
position: relative;
overflow: hidden;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 auto;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
color:#95061e;
margin-bottom:10px;display:inline-block;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;margin-top:3px;
display:inline-block;
color:#953606;
}
jsfiddle link click here
Remove the floating in your css, as shown here.
https://jsfiddle.net/dy8bzuv3/
If you want to have both divs in a single line, simply add display:inline; to your css rules for #one and also #two
Good luck on your learning journey! The change I've made here is the #one and #two divs are being given display:inline. This will treat them similar to text, so the text-align option applies to them.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
color:#95061e;
margin-bottom:10px;
display: inline;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
display: inline;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
Related
In the middle of creating one of my first webpages for a college course and ran into a really weird problem. I've been commenting out code trying to find where the issue is but I have no idea what's wrong.
I used *{ border: 1px solid red; } to see all the CSS elements, and all I see that's related is a red line that outlines the entire page.
Any help? Here's my CSS.
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:white;
text-align:center;
font-size:55px;
}
.gradPic{
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color:black;
top:0;
left:0;
height:150px;
width:1875px;
position:static;
border:5px outset white;
border-style:groove;
}
.bio {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
}
.movies {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:492px;
bottom:625px;
}
.books {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:984px;
bottom:1250px;
}
.sites {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:1476px;
bottom:1875px;
}
body {
background-image: url("gradient.jpg");
color:white
}
And the HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="StylesheetAssign2.css" type="text/css">
<title>Sujal's IT 130 Assignment 2 Page</title>
</head>
<body>
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !-->
</div>
<div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic"> <!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div>
</body>
</html>
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:white;
text-align:center;
font-size:55px;
}
.gradPic{
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color:black;
top:0;
left:0;
height:150px;
width:100%;
border:5px outset white;
border-style:groove;
}
.totaldiv{display:flex;width:100%;}
.bio {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
}
.bio h2{margin: 0 0 10px;}
.movies {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:492px;
bottom:625px;
}
.books {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:984px;
bottom:1250px;
}
.sites {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:1476px;
bottom:1875px;
}
body {
background-image: url("gradient.jpg");
color:white
}
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !-->
</div>
<div class="totaldiv">
<div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !-->
<!--<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic">--> <!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div>
</div>
Your code is far from being useable for a real website (i.e. not repsponsive), but if you really want to fix such a width to the page, you should move the width setting from the header to the body, use display: inline-block; and vertical-align: top; on all those boxes that should be next to each other, and erase position: relative and all their top, bottom, leftand right` settings. That way also the whitespace at the bottom will be history...
You can create spaces between the boxes by using margin-left on them, but there are better solutions like using a (full-width) container and applying display: flex and justify-content: space-between to it.
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: white;
text-align: center;
font-size: 55px;
}
.gradPic {
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color: black;
height: 150px;
position: static;
border: 5px outset white;
border-style: groove;
}
.bio {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.movies {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.books {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.sites {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
body {
background-image: url("gradient.jpg");
color: white;
width: 1875px;
}
<div class="titleBox">
<h1>Sujal Dantluri</h1>
<!-- box at the top of the page !-->
</div>
<div class="bio">
<h2 style=color:white;text-align:center>Personal Background</h2>
<!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic">
<!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies">
<h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books">
<h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites">
<h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2>
</div>
Basically I have this title that says testing. On large screens it isn't centered, and is moved to the right. I want it to be centered, but I can't get it centered. On smaller screens it is to the right of the images and pushing them left, keeping nothing centered. In all cases I want it to be below the images and centered in the page. Thanks.
I keep trying aligns, floats, widths, and margins/ padding but nothing works.
<div class="primary-content">
<span class="title">FTC TEAM 4466</span>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<span class="title">testing</span>
<h1>4466</h1>
<span class="egg"> <p>
egg
</p></span>
</div><!-- End -->
</div><!-- End .primary-content -->
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
I though that the div being below the other ones in the code would do it, but it just doesn't. I think the issue on big screens may be that .bot and .pod are different heights, but I dob't know how to make them equal as it changes as the page gets smaller and bigger. I don't know why my issue is happening for the small screens (under 1300px width).
Thanks again.
set display to flex and add justify.content:center to the CSS properties of the div you are trying to center.
this could happen because you are using an tag in the title,
span tags can not get centered, change this for an h1 tag or another
I did some changes to your code and this is what I came up with:
Feel free to use it
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 4rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
<div class="primary-content">
<h2>FTC TEAM 4466</h2>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<h2>testing</h2>
<h2>4466</h2>
<p>egg</p>
</div><!-- End -->
</div><!-- End .primary-content -->
I don't know how to ask this...
I made a layout using some css, I have a container div (.truck_info) with 2 elements inside, the first one is on the top, and the second one (.truck_cont) has a height:100% and vertical-align:middle (it covers the whole container), I don't know why the elements inside this second element are not aligned to middle, this is my code:
jsfiddle: https://jsfiddle.net/5qtbkemy/
HTML code:
<div class="truck_slot" >
<table class="table_truck"><tbody><tr>
<td class="truck_colo" style="background-color:#F11; ">
<div class="truck_time">Left pane</div>
</td>
<td class="truck_info">
<div class="truck_stop" style="background-color:#F11; ">Top line</div>
<div class="truck_cont">
<div class="truck_name" style="font-size:28px; ">Middle</div>
<div class="truck_para" style="font-size:11px;">Why this text isn't</div>
<div>middle align?</div>
</div>
</td>
</tr></tbody></table>
</div>
CSS Code:
.truck_slot{
float:left;
width:170px;
cursor:pointer;
margin:5px 8px;
}
.table_truck{
width:100%;
height: 155px;
padding:0px;
border:1px #CCCCCC solid;
border-radius:10px;
padding:2px;
border-collapse: separate;
border-spacing: 0px;
box-shadow: 2px 2px 3px #999;
}
.table_truck td{
font-family:Arial, Helvetica, sans-serif;
color: #666;
}
.table_truck .truck_colo{
height:100%;
width: 55px;
text-align: center;
vertical-align: top;
border-radius: 6px 0 0 6px;
color: #FFF;
}
.table_truck .truck_time{
font-size:13px;
font-weight:bold;
font-family: "Calibri", "Century Gothic", Century, Arial, "Arial Black";
}
.table_truck .truck_info{
height:100%;
vertical-align: top;
color:#666;
}
.table_truck .truck_info .truck_info_div{
height:90px;
overflow:hidden;
}
.table_truck .truck_stop{
border-radius: 0 6px 0 0;
padding: 0 5px;
color: #FFF;
line-height:20px;
font-size:13px;
font-weight:bold;
}
.table_truck .truck_cont{
height: 100%;
vertical-align:middle;
}
.table_truck .truck_name{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding: 0 14px 0 3px;
/*margin-bottom:10px*/
}
.table_truck .truck_para{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-left:3px;
}
I hope you can help me to understand what is wrong.
Thank you!
Add text-align: center and remove the padding on .truck_name.
.truck_para needs a text-align: center too, as does the div below it.
.truck_slot{
float:left;
width:170px;
cursor:pointer;
margin:5px 8px;
}
.table_truck{
width:100%;
height: 155px;
padding:0px;
border:1px #CCCCCC solid;
border-radius:10px;
padding:2px;
border-collapse: separate;
border-spacing: 0px;
box-shadow: 2px 2px 3px #999;
}
.table_truck td{
font-family:Arial, Helvetica, sans-serif;
color: #666;
}
.table_truck .truck_colo{
height:100%;
width: 55px;
text-align: center;
vertical-align: top;
border-radius: 6px 0 0 6px;
color: #FFF;
}
.table_truck .truck_time{
font-size:13px;
font-weight:bold;
font-family: "Calibri", "Century Gothic", Century, Arial, "Arial Black";
}
.table_truck .truck_info{
height:100%;
vertical-align: top;
color:#666;
}
.table_truck .truck_info .truck_info_div{
height:90px;
overflow:hidden;
}
.table_truck .truck_stop{
border-radius: 0 6px 0 0;
padding: 0 5px;
color: #FFF;
line-height:20px;
font-size:13px;
font-weight:bold;
}
.table_truck .truck_cont{
height: 100%;
vertical-align:middle;
}
.table_truck .truck_name{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding: 0;
/*margin-bottom:10px*/
text-align: center;
}
.table_truck .truck_para{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-left:3px;
text-align: center;
}
<div class="truck_slot" >
<table class="table_truck"><tbody><tr>
<td class="truck_colo" style="background-color:#F11; ">
<div class="truck_time">Left pane</div>
</td>
<td class="truck_info">
<div class="truck_stop" style="background-color:#F11; ">Top line</div>
<div class="truck_cont">
<div class="truck_name" style="font-size:28px; ">Middle</div>
<div class="truck_para" style="font-size:11px;">Why this text isn't</div>
<div style="text-align: center">middle align?</div>
</div>
</td>
</tr></tbody></table>
</div>
The correct original answer was deleted by the author, what I used was a flex-box solution, I added 3 lines:
.table_truck .truck_cont{
height: 85%;
vertical-align:middle;
display: flex; /* To use flexbox I need to set a flex display */
flex-direction: column; /* to make it vertical I change the direction to column */
justify-content: center; /* finally, I must set the orientation to center */
}
This is the edited jsfiddle: https://jsfiddle.net/5qtbkemy/5/
I found this link useful to learn quickly about flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope it helps!
I often use the line-height to height div element in which vertically centered text:
div {
height: 100px;
line-height: 100px;}
This is the jsfiddle link to my HTML page, and its clear that there is space between the header and content divs and in between content and footer divs. What is causing this, how to remove this. What changes should I do in my CSS?
If I do margin-top:-50px in the content div then it touches the bottom of the header div? But this seems more of a hack and this does n't works with the footer? Moreover I don't like this approach.
CSS
html{
font-size:100%;
margin:0;
padding:0;
min-height: 100%;
position: relative;
}
body{
margin:0;
padding:0;
}
#header{
background-color:#007FFF;
width : 100%;
height:130px;
}
#content{
background-color:#B0E2FF;
margin-bottom:0px;
margin-top:0px;
}
#footer{
background-color:#B0E2FF;
position: absolute;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
h2 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
#wrapper{
width:60%;
margin:0 auto;
background-color: red;
}
.scrollabletextbox{
width:900px;
height:120px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:3px solid #00008B;
background-color:#E6E8FA;
}
#querytextarea{
float: left;
}
button{
float: right;
}
form:{
width:90%;
margin:0 auto;
}
HTML
<body>
<div id="header">
<h2>Console</h2>
<h1>Query</h1>
</div>
<div id="content">
<div id="wrapper">
<form>
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
<textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br>
<button type="submit" form="form1" value="Submit">Submit</button>
<br>
<h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3>
<textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
You could exchange the margin-topof the h3 inside the #content with padding-top
#content {
h3 {
margin: 0;
padding-top: 50px;
}
}
Consider using classes for styling instead of an id.
I think your problem is that you have set a margin-top (on HTML file) on your h3 element.
Juste change it like this :
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
But this should be better, on HTML :
<h3 id="myFirstH3">Mongo Query</h3>
And on CSS add this:
#myFirstH3{
margin-bottom:1px;
margin-top:0px; /*set to 0 because h3 have a margin top by default*/
color:#22316C;
}
It's better to place css on CSS file.
Hope it helps.
EDIT
Response too late ;)
Give a padding of atleast 1px
#content{
padding: 1px;
}
Here is the updated Demo
html{
font-size:100%;
margin:0;
padding:0;
min-height: 100%;
position: relative;
}
body{
margin:0;
padding:0;
}
#header{
background-color:#007FFF;
width : 100%;
height:130px;
}
#content{
background-color:#B0E2FF;
margin-bottom:0px;
margin-top:0px;
}
#footer{
background-color:green;
position: fixed;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
h2 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
#wrapper{
width:60%;
margin:0 auto;
background-color: red;
}
.scrollabletextbox{
width:900px;
height:120px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:3px solid #00008B;
background-color:#E6E8FA;
}
#querytextarea{
float: left;
}
button{
float: right;
}
form:{
width:90%;
margin:0 auto;
}
#content{
padding: 1em;
padding-bottom: 100px; // since footer is having 90px height
}
<body>
<div id="header">
<h2>Console</h2>
<h1>Query</h1>
</div>
<div id="content">
<div id="wrapper">
<form>
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
<textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br>
<button type="submit" form="form1" value="Submit">Submit</button>
<br>
<h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3>
<textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
EDIT
To arrange footer
#content{
padding: 1em;
padding-bottom: 100px; // since footer is having 90px height
}
Here is the updated Demo
Remove top margin from h3
<h3 style="margin-bottom:1px;margin-top:0px; color:#22316C">Mongo Query</h3>
AND
If you also wants to footer comes after content then remove bottom:0 from below css.
#footer{
background-color:#B0E2FF;
position: absolute;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
I have the following code but I am unsure how I would adjust it so that I have 2x boxes left and right of the center box with about 20px margin on the monitor side of the boxes and a 10 to 15px margin in between the boxes.
I also cannot seem to get them aligned in a straight line. I am aware I only have one left box at the moment.
jsFiddle:
http://jsfiddle.net/qY6BT/
CSS:
body{
background-repeat:repeat;
background-image:url('../images/bg.jpg');
}
h1{
text-align:center;
color:#8f4988;
}
.bold{
font-weight: bold;
}
a{
font-weight: bold;
color:#8f4988;
}
p{
margin: 5px 25px 0 25px;
text-align:left;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#wrapper{
margin:8% auto;
background-color:#e3e3e3;
border-radius:5px;
width:550px;
min-height:350px;
}
#logo{
width:150px;
margin:0 auto;
padding:10px 0 10px 0;
}
#socialMedia{
float:right;
width:205px;
height:64px;
margin:10px 0 0 0;
}
#socialMedia p {
float:left;
margin:0 auto;
}
#socialMedia .twitter{
width:49px;
height:64px;
background:url('../images/twittericon.png') no-repeat;
}
#socialMedia .facebook{
width:49px;
height:64px;
background:url('../images/facebookicon.png') no-repeat;
}
#socialMedia .linkedin{
width:49px;
height:64px;
background:url('../images/linkedinicon.png') no-repeat;
}
#portfolio{
height:350px;
width:350px;
margin:-452px 0 0 5px;
background-color:#e3e3e3;
border-radius:5px;
}
#portfolio h3{
padding:15px 0 10px 0;
text-align: center;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#portfolio li{
text-align: center;
padding:0 0 15px 0;
}
#portfolio li a{
font-weight: normal;
color:#000;
text-decoration: none;
}
HTML:
<div id="wrapper">
<div id="logo">
<img src="_assets/images/logo.png" alt="Logo">
</div>
<h1>H1</h1>
<div class="paragraphContent">
<p>Content</p>
<br/><br/>
<p>
Regards,
</p>
<p class="bold">Name</p>
</div>
<div id="socialMedia">
</div>
</div>
<div id="portfolio">
<h3>Portfolio</h3>
<ul>
<li>Text</li>
</ul>
</div>
Are you trying to achieve this?
http://jsfiddle.net/qY6BT/1/