I need your help,
How can the text be vertically centered in my custom alert box.
I thought that by having the existing css properties of:
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top: 10px;
}
That it would automatically appear to be centered.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox_container {
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid #808080;
position: relative;
color: rgb(11,63,113);
font-family: Arial;
background: #FFF;
visibility: hidden;
}
#alertBox {
height: 100px;
width: 400px;
bottom: 50%;
right: 50%;
position: absolute;
font-size: 9pt;
}
#alertBox_titlebar {
line-height:24px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
font-weight: bold;
}
.alertBox_Button {
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
.alertBox_Button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 8pt;
font-weight: bold;
margin-top: 2px;
margin-right: 2px;
padding-top: 2px;
position:absolute;
top:0;
right:0;
}
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top: 10px;
}
</style>
<script type="text/javascript">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
function alertBox(text, type) {
if (type == "err") {
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
}
else if (type == "sucess") {
document.getElementById('alertBox_text').style.color = "#008000"
document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
}
else if (type == "ok") {
document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
}
document.getElementById('alertBox_text').innerHTML = text
document.getElementById('alertBox_container').style.visibility = 'visible'
}
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
</head>
<body onload="alertBox('testing the system')">
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</div>
</body>
</html>
Text-align only applies to horizontal alignment.
If you wish to vertically align text and you know your container's height, you can use the line-height property to vertically align single-line text by setting it equal to the height.
Alternatively, use one of the techniques documented here: http://css-tricks.com/centering-in-the-unknown/
Related
I know there should a mistake in my CSS but I can't figure out which one has caused of the footer be in front of the calendar.
The calendar is in the lab content div and the footer is outside of that div.
So far I've tried removing position:fixed for the footer; then it floats to the top of the page (with margin-top:auto; and without it)
I just want to figure out how to enable scrolling only my page.
body {
line-height: 1.5;
padding: 0;
margin: 0;
background-color: silver;
}
.imagebox {
width: 450px;
height: 350px;
display: flex;
float: left;
flex-basis: 75%;
}
.container {
width: 97%;
margin: auto;
}
.header {
background-color: white;
position: fixed;
top: 0;
left: 200px;
right: 0;
height: 150px;
color: black;
padding-top: 28px;
min-height: 70px;
border: 3px solid;
border: solid;
border-width: thin;
border-color: black;
display: flex;
flex: 0.5;
flex-wrap: wrap;
text-align: center;
padding: 5px;
padding-left: 250px;
padding-right: 250px;
}
.header1 {
flex: 1;
text-align: center;
float: left;
width: 50%;
background-color: white;
}
.header2 {
flex: 1;
text-align: center;
float: right;
width: 50%;
background-color: white;
}
.flex-container {
clear: both;
display: flex;
float: inherit;
}
h3 {
padding: 8px 16px;
}
ul {
list-style-type: none;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.summary {
flex: 30%;
width: 50%;
font-size: 12px;
border-style: solid;
border-width: thin;
border-color: black;
order: 2;
background-color: white;
top: 150px;
float: left;
position: fixed;
bottom: 50px;
left: 200px;
right: 600px;
text-align: justify;
}
.biobox {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
flex: 50%;
order: 3;
width: 50%;
text-align: left;
border-color: black;
border-width: thin;
border-style: solid;
font-size: 15px;
top: 150px;
left: 900px;
position: fixed;
background-color: white;
float: right;
bottom: 50px;
overflow-wrap: break-word;
}
.lab-content {
background-color: silver;
position: fixed;
margin-top: auto;
left: 200px;
bottom: 50px;
right: 0;
}
.footer {
background-color: white;
position: fixed;
bottom: 0;
left: 200px;
right: 0;
margin-top: auto;
text-align: center;
border: 3px solid;
border: solid;
border-width: thin;
border-color: black;
}
.summarybox {
position: fixed;
bottom: 50px;
left: 190px;
right: 600px;
margin-top: 30px;
text-align: justify;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 12px;
}
.navtext h3 {
text-align: center;
padding: 8px 16px;
}
.cal {
text-align: left;
}
.cal h3 {
padding: 0 0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Tony's Calendar
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="newIt207.css" type="text/css"/>
<link rel="stylesheet" href="calendar.css" type="text/css"/>
</head>
<body>
<div class ="container">
<header>
<?php
include('header.php');
?>
</header>
<div class = "flex-container">
<?php
include('menu.ssi');
?>
<div class = "lab-content">
<div class ="input_option">
<form method = "post" action = "calender.php">
<input type = "text" name = "name" center>Student name
<input type = "text" name = "email" center>Email
<input type = "submit" value = "submit">
</div>
<?php
date_default_timezone_set("America/New_York");
$current_year = date("Y");
$current_month = date("m");
$daysinmonth = date("t");
$d = mktime(0,0,0, $current_month, 1, $current_year);
$day_of_week = date('w',$d);
$day_array= array("Sunday", "Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday");
$title = date('F');
$blank = 0;
switch ($day_of_week) {
case 0: $blank = 0; break;
case 1: $blank = 1; break;
case 2: $blank = 2; break;
case 3: $blank = 3; break;
case 4: $blank = 4; break;
case 5: $blank = 5; break;
case 6: $blank = 6; break;
}
echo "<h1><b>" .$title." ".$current_year."</h1></b>" ;
echo "<div class ='table'>";
echo "<div class='table_body'>";
echo "<div class='table_row'>";
foreach($day_array as $value)
{
echo "<div class ='table_header_cell'>".$value."</div>";
}
echo "</div> </div>";
$day_count = 1;
echo "<div class='table_body'>";
echo "<div class='table_row'>";
while ($blank > 0) {
echo "<div class='table_cell'></div>";
$blank = $blank-1;
$day_count++;
}
$day_num = 1;
while ($day_num <= $daysinmonth) {
echo "<div class='table_cell'>$day_num</div>";
$day_num++;
$day_count++;
if ($day_count > 7) {
echo "</div></div><div class='table_body'><div class='table_row'>";
$day_count = 1;
}
}
while ($day_count > 1 && $day_count <=7) {
echo "<div class='table_cell'></div>";
$day_count++;
}
echo "</div> </div>";
echo "</div>";
?>
</div>
<div>
<?php
include('footer.ssi');
?>
</div>
</div>
</div>
</body>
</html>
It's hard to tell without seeing your code but, try setting the z-index property in .lab-content and .footer. The z-index for the lab-content element should be higher than the footer element.
.lab-content {
z-index: 2;
}
.footer {
z-index: 1;
}
Here is some info on z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Here is the last part of your HTML.
<div>
<?php
include('footer.ssi');
?>
</div>
</div> <<----
</div>
</body>
</html>
The footer DIV seems to be inside the .flex-container. I have highlighted the offending /div with an arrow. If you move that above the footer DIV it should work and the footer should be actually at the foot of your page. Both the header and footer will still be inside your main container.
I want to display an input box in html and 2 small buttons to the right, one on top of each other. Something like this
https://jsfiddle.net/danaya/yw94f0Lt/3/
The html code is simple
<div class="list">
<div class="name">product</div>
<div class="input">
<input type="text" size="3" value="1">
<div class="inc">+</div>
<div class="dec">-</div>
</div>
<div class="price">2.99</div>
</div>
And this is the css
.list {
display: flex;
}
.name,
.input,
.price {
padding: 10px 10px;
border: 1px solid red;
}
.name {
width: 50%;
}
.input,
.price {
text-align: right;
width: 25%;
}
.input {
position: relative;
top: -5px;
}
input {
line-height: 25px;
}
.inc,
.dec {
display: block;
position: absolute;
width: 13px;
height: 13px;
background-color: #999;
text-align: center;
color: #fff;
line-height: 12px;
}
.inc {
top: 11px;
left: 40px;
}
.dec {
top: 25px;
left: 40px;
}
As it is right now, when I resize the window, the div.input is resized and so the buttons, being related to the input, lose their position by the input element.
I need to keep the flex display in the .list element, but other than that I can change anything. I also need the buttons to not increase the width of the div.input element, that's why I'm using the position:relative.
Any ideas?
Thanks
Would this work for you?
.list {
display: flex;
align-items: center;
}
.name,
.price {
padding: 0 10px;
}
.input, input {
box-sizing: border-box; /*to set the equal height to bot .input and input*/
height: 31px; /*13 + 13 (buttons) + 5 (paddings for buttons) = 31px */
}
.input {
position: relative;
/*width: 25%; Use this if you want to increate the width of your div.input*/
}
input {
padding-right: 15px; /* 15px set so that input characters do not go underneath the + and - buttons */
width: 100%; /* set 100% so that input will take 100% width of its parent size */
}
.inc,
.dec {
box-sizing: border-box;
display: block;
position: absolute;
width: 13px;
height: 13px;
background-color: #999;
text-align: center;
color: #fff;
line-height: 12px;
}
.inc {
top: 2px;
right: 2px;
}
.dec {
bottom: 2px;
right: 2px;
}
<div class="list">
<div class="name">product</div>
<div class="input">
<input type="text" size="3" value="1">
<span class="inc">+</span>
<span class="dec">-</span>
</div>
<div class="price">2.99</div>
</div>
I want to say that I've tried everything, but I refuse to believe that's true. I'm trying to vertical-align an image inside a div. Although it looked like it worked, I noticed there was more space above the image than below.
After some debugging, I found that box-sizing: border-box was the problem. But because I'm using Bootstrap (and it seems it relies on it), I can't change it.
See my snippet below. Click 'Toggle box-sizing' to turn box-sizing on or off.
var toggled = false;
$('#toggle').on('click', function() {
if (!toggled) {
$('*').css('box-sizing', 'border-box');
toggled = true;
} else {
$('*').css('box-sizing', 'initial');
toggled = false;
}
});
.left-sidebar {
width: 180px;
background-color: #34495e;
}
.left-sidebar .user-menu {
height: 80px;
position: relative;
padding: 0 15px;
color: #fff;
line-height: 80px;
border-bottom: 2px solid #3d566e;
}
.left-sidebar .user-menu img {
vertical-align: middle;
border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
margin-left: 5px;
font-size: 16px;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Toggle box-sizing</button>
<nav class="left-sidebar">
<div class="user-menu">
<img src="https://placehold.it/50x50">
<span class="user-info">Someone</span>
</div>
</nav>
<!-- .left-sidebar -->
I hope you guys can help me out.
Not sure if you can use flexbox but here's a way to keep it centered.
var toggled = false;
$('#toggle').on('click', function() {
if (!toggled) {
$('*').css('box-sizing', 'border-box');
toggled = true;
} else {
$('*').css('box-sizing', 'initial');
toggled = false;
}
});
.left-sidebar {
width: 180px;
background-color: #34495e;
}
.left-sidebar .user-menu {
display: flex; /* added */
align-items: center; /* added */
/* height: 80px; || removed */
line-height: 80px; /* kept */
/* position: relative; || removed */
padding: 0 15px;
color: #fff;
border-bottom: 2px solid #3d566e;
padding-top: 4px; /* added to negate border-bottom */
}
.left-sidebar .user-menu img {
/* vertical-align: middle; || removed */
border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
margin-left: 5px;
font-size: 16px;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="toggle">Toggle box-sizing</button>
<nav class="left-sidebar">
<div class="user-menu">
<img src="https://placehold.it/50x50">
<span class="user-info">Someone</span>
</div>
</nav>
<!-- .left-sidebar -->
fiddle
https://jsfiddle.net/Hastig/efoyyms4/7/
Border bottom is making problem. Try to replace
border-bottom: 2px solid #3d566e; with
box-shadow: 0 2px 0 #3d566e;
JSFiddle example
The problem was you set height to be 80px and border as a solid 2px this means your line-height:80px line needs to be 78px for your intended result (80 - 2)
.left-sidebar {
width: 180px;
background-color: #34495e;
}
.left-sidebar .user-menu {
height: 80px;
position: relative;
padding: 0 15px;
color: #fff;
line-height: 78px;
border-bottom: 2px solid #3d566e;
}
.left-sidebar .user-menu img {
vertical-align: middle;
border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
margin-left: 5px;
font-size: 16px;
font-weight: 300;
}
<nav class="left-sidebar">
<div class="user-menu">
<img src="https://placehold.it/50x50">
<span class="user-info">Someone</span>
</div>
</nav>
I am making a chat script with the possibility to minimize the particular chat and I can't seem to figure out how to make the header of the div push down! Is there a way to do this?? I researched this and was unable to find a way to get the results I want.
my HTML code is as follows
<?php
$usrid = "Joel";
?><!DOCTYPE html>
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="css/style.css">
<SCRIPT SRC="js/jquery-2.1.1.min.js"></SCRIPT>
<SCRIPT>
function onTestChange() {
var key = window.event.keyCode;
// If the user has pressed enter
if (key == 13) {
event.preventDefault();
post();
}
else {
return true;
}
}
function post()
{
document.getElementById('txtArea').value = "";
}
</SCRIPT>
</HEAD>
<BODY><?php
$file = simplexml_load_file("xml/joel.xml");
echo"
<DIV CLASS=\"chatbox\">
<DIV CLASS=\"title\">
<SPAN CLASS=\"name\">
$file->subject
</SPAN>
<SPAN CLASS=\"buttons\">
<BUTTON ONCLICK=\"minimize()\" NAME=\"Minimize\" ID=\"min\">-</BUTTON><BUTTON ONCLICK=\"close()\" NAME=\"Close\">x</BUTTON>
</SPAN>
</DIV>
<DIV ID=\"body\" CLASS=\"hidden\">
<DIV CLASS=\"history\">";
foreach($file->post as $post)
{
if($post->auth == $usrid)
{
echo"
<DIV CLASS=\"self\">
<DIV CLASS=\"self_left\">
$post->content
</DIV>
<DIV CLASS=\"self_right\">
$post->auth
</DIV>
</DIV>
";
}
else
{
echo"
<DIV CLASS=\"other\">
<DIV CLASS=\"other_left\">
$post->auth
</DIV>
<DIV CLASS=\"other_right\">
$post->content
</DIV>
</DIV>
";
}
}
echo" </DIV>
<DIV CLASS=\"input\">
<DIV ID=\"input\">
<DIV CLASS=\"text\">
<TEXTAREA NAME=\"input\" ONKEYPRESS=\"onTestChange()\" ID=\"txtArea\"></TEXTAREA>
</DIV>
<DIV CLASS=\"submit\">
<BUTTON SRC=\"images/button1.png\" ONCLICK=\"post()\">Send</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>";
?>
and my css is
::-webkit-scrollbar
{
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track
{
background: url(../images/bg.png);
}
::-webkit-scrollbar-thumb
{
background: rgba(0,0,0,0.5);
border-radius: 25px;
}
.chatbox
{
width: 250px;
margin: 0 auto;
border: 1px solid black;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
overflow: hidden;
flex-direction: column;
}
.title
{
width: 100%;
border-bottom: 1px solid black;
display: inline-block;
background: #436ED2;
flex-direction: column;
}
.name
{
width: calc(50% - 10px);
float: left;
text-align: left;
margin-top: 3px;
padding-left: 10px;
}
.buttons
{
width: 50%;
float: right;
text-align: right;
}
.buttons button
{
width: 24px;
height: 24px;
border: none;
background: none;
outline: none;
}
.history
{
width: 90%;
margin: 0 auto;
height: 300px;
border: 1px solid black;
margin-top: 5px;
overflow: auto;
overflow-x: hidden;
}
.self
{
width: 100%;
background: #c6d3f1;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.self_left
{
width: calc(80% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.self_right
{
width: calc(20% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.other
{
width: 100%;
background: #f1d3c6;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.other_left
{
width: calc(20% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.other_right
{
width: calc(80% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.input
{
width: 90%;
margin: 0 auto;
height: 90%;
margin-top: 5px;
}
#input
{
width: 100%;
display: inline-block;
}
textarea
{
resize: none;
width: 75%;
height: 40px;
float: left;
}
.input button
{
float: right;
width: 20%;
height: 46px;
top: 10px;
}
.hidden
{
display: none;
flex-direction: column;
}
I want my div called title to move down when I invoke the script minimize() which I haven't added yet.
You can use flex boxes to achieve this
Take a look at this article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will make the divs go up instead of down:
.container {
flex-direction: column-reverse;
}
the easiest method that I discovered after changing the question I was asking that gets the proper results, is very simple
.chatbox
{
position: fixed;
bottom: 0px;
}
that's it
You can use jQuery's .animate() method to zoom each chat div to "minimized" / "maximized" state.
Here is an imperfect example that I just hashed together as a starting point:
jsFiddle Demo
HTML:
<div class="chatBox" id="chat-17">
<div class="chatTitle">
<div class="titleText">This is chat title</div>
<div class="titleMin"> v</div>
</div>
<div class="chatBody">
Chat message goes here
</div>
</div>
jQuery:
$('.titleText').click(function(){
if ( $(this).hasClass('minTitle') ){
$(this).removeClass('minTitle');
$(this).parent().parent().removeClass('minimized');
}else{
$(this).addClass('minTitle');
var cb = $(this).parent().parent();
cb.addClass('minimized');
//cb.animate(function(){top: '150',left: '10'},500);
}
});
css:
.chatBox{width:100%;border:1px solid blue;overflow:hidden;}
.chatTitle{width:100%;height:20px;}
.titleText{width:95%;height:100%;color:white;font-weight:bold;float:left;background:black;}
.titleMin{width:4.5%;height:100%;color:red;font-weight:bold;float:left;text-align:center;background:black;}
.titleMin:hover{cursor:pointer;cursor:hand;}
.chatBody{width:100%;height:150px;padding:10px;background:wheat;}
Additional css added because example didn't work:
.titleText:hover{cursor:pointer;cursor:hand;}
.minimized{height:5px;width:5px;position:absolute;top:150px;}
span{font-weight:bold;color:red;}
Resources:
http://api.jquery.com/animate/
http://viralpatel.net/blogs/understanding-jquery-animate-function/
http://www.tutorialscollection.com/jquery-animate-how-to-animate-in-jquery-using-animate-method/
http://www.1stwebdesigner.com/tutorials/jquery-animation-tutorial/
My site is displaying differently in Chrome to other browsers. I have checked in IE, Firefox, Safari and Chrome. All are ok apart from Chrome.
Looking at the CSS im not sure what the problem is.
Its 3 equal sized boxes in a line next to each other. the left and middle box are aligned but the right box is 20px higher up in Chrome.
Here is the CSS for the boxes:
#home_boxes {
margin: 20px 0 0 0;
clear: both;
width: 1000px;
overflow: hidden;
}
#home_boxes p {
margin-top: 0;
font-size: 10pt;
}
#home_boxes h2 {
margin-top: 0;
margin-bottom: 5px;
font-size: 14pt;
font-family: Verdana, Arial, Geneva, sans-serif;
}
#home_boxes .box_content {
width: 220px;
float: right;
padding: 5px;
}
#contact_box {
width: 318px;
min-height: 150px;
height: 100%;
background: url('../images/3box/contact.png') no-repeat #efefef;
float: left;
margin-right: 20px;
border: 1px solid #c9c9c9;
}
#contact_box:hover {
background: url('../images/3box/contact-hover.png') no-repeat #00529f;
border: 1px solid #c9c9c9;
color: #fff;
}
#about_box {
width: 318px;
min-height: 150px;
height: 100%;
background: url('../images/3box/about.png') no-repeat #efefef;
float: right;
margin-right: 20px;
border: 1px solid #c9c9c9;
}
#about_box:hover {
background: url('../images/3box/about-hover.png') no-repeat #00529f;
border: 1px solid #c9c9c9;
color: #fff;
}
#home_boxes #side_newsletter_box {
width: 320px;
background: url('../images/3box/newsletter.png') no-repeat;
overflow: hidden;
float: right;
}
#newsletter_box {
width: 318px;
min-height: 150px;
height: 100%;
background: url('../images/3box/newsletter.png') no-repeat #efefef;
float: right;
border: 1px solid #c9c9c9;
}
#newsletter_box:hover {
background: url('../images/3box/newsletter-hover.png') no-repeat #00529f;
border: 1px solid #c9c9c9;
color: #fff;
}
and here is the HTML:
<div id = "home_boxes">
<div id="newsletter_box">
<div class = "box_content">
<h2><?=get_content(610)?></h2>
<p><?=get_content(3234)?></p>
<form action = <?=$myroot?>"newsletter_process.php" method = "post">
<input type = "text" name = "email" class = "news_signup_input" value = <?=get_content(27)?> onClick = "this.value=''" />
<input type = "submit" name = "newsletter_submit" value = "" class = "news_signup_submit" />
</form>
</div>
</div>
<a href = "contact">
<div id = "contact_box">
<div class = "box_content">
<h2><?=get_content(1641)?></h2>
<p><?=get_content(3257)?></p>
</div>
</div>
</a>
<a href = "about">
<div id = "about_box">
<div class = "box_content">
<h2><?=get_content(3236)?></h2>
<p><?=get_content(3749)?></p>
</div>
</div>
</a>
</div>
Can someone see a problem. As im not sure of what the problem is i've been messing around with the CSS for a while but to no avail. I did not create this code, i've taken it on from someone else.
As far as im aware its simple, Place a clear beneath the 3 box divs (newsletter_bos, contact_box, about_box) but within the main (home_boxes) div.
something like this
.clear {
clear: both;
line-height: 0%;
height: 0px;
display: block;
}
This should solve your problem and align all boxes correctly.