There is auto clear too. You have to apply it to the PARENT in which you floated the div. And it goes like this
PHP Code:
.parentdiv {
overflow:hidden;
zoom:1;
}
I have cleared up some of your dirty coding , also I suggest using 960's grid system since your positioning sucks , this still does not solve the problem through. I am trying hard , but I have no idea what causing it. First i thought its because the p element is inline , but that's not the case. If I come up with something Ill tell you.
PHP Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link href="styles.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="theWrapper container_12"> <!-- container_12 , grid_4 are part of 960 grid -->
<div class="mainButtons greenGradient grid_4">
<div class="theTitles trigger">Book Lessons Now</div>
<div class="toggle">
<input type="text" placeholder="First Name" /><br />
<input type="text" placeholder="Last Name" /><br />
<input type="number" placeholder="Phone Number" /><br />
<input type="email" placeholder="E-Mail Address" /><br />
<button>Send Inquiry</button>
</div>
</div>
<div class="mainButtons redGradient grid_4">
<div class="theTitles trigger">View Our Feed</div>
<div class="toggle">
<div><p>Loading Social Feeds...</p></div>
</div>
</div>
<div class="mainButtons blueGradient grid_4">
<div class="theTitles trigger">Got a Question?</div>
<div class="toggle">
<p>Loading Contact Page...</p>
</div>
</div>
<script>
$(".toggle").slideUp();
$(".trigger").click(function(){
$(this).next(".toggle").slideToggle("slow");
});
</script>
</div>
<div class="container_12">
<div class="somecontent grid_12"></div>
</div>
</body>
</html>
PHP Code:
@import url('960.css'); /* get it from 960.gs */
.theWrapper {
margin-bottom: 15px;
text-shadow: 0px 1px 2px #000;
}
.mainButtons { width: 300px; height: 70px; }
.theTitles {
height: 70px;
line-height: 70px;
text-align: center; /* Old browsers */
color: #FFF;
box-shadow: 0px 0px 3px 0px #000;
border-radius: 5px;
}
.redGradient {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
}
.greenGradient {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
background-color:#3d94f6;
}
.blueGradient {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
}
.theTitles:hover {
cursor: pointer;
}
.toggle {
text-align: center;
display: none;
background-color: #FFF;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0px 0px 3px 0px #000;
border-radius: 5px;
}
.theTitles input {
width: 90%;
border: solid 1px #ccc;
padding: 3px;
margin: 5px 0px;
}
.somecontent { height:50px; background:#ccc; }
.clear { clear:both; }
You don't need to manully style the same div over and over just to toggle it , when you can create one div , and toggle it with any button yet still have different content in it , like so
PHP Code:
<script>
$(".toggle").slideUp();
$(".trigger").click(function(){
$(this).next(".toggle").slideToggle("slow");
});
</script>
Reply With Quote
Originally Posted by Parker
Just saying
