I have a from inside a div (with a border). This looks good on Firefox and IE 10 (not sure about older versions of IE). However, sometimes IE activates the compatibility mode and then the form (input box and submit button) fall out of the div. Is there some css tweak to prevent this?
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<div class="box">
<h2 style="display:inline;">Some sample text</h2>
<form id="frm">
<input type="text" id="tb" />
<input type="submit" class="button" />
</form>
</div>
</body>
</html>
and my css
.box {
display:block;
height:40px;
magin-left:5px;
padding:5px 0 0 10px;
width:740px;
background:green;
border:1px solid black;
}
h2 {
margin:0 0 7px;
padding:0;
font:1.6em Arial;
letter-spacing: -1px
}
#tb {
width:225px
}
.button {
float:right;
width:93px;
margin-left:5px;
padding:2px 0
}
form {
float:right;
}
#frm {
margin-right:10px;
margin-top:2px;
width:330px;
}
Live example at jsfiddle:
http://jsfiddle.net/d3EdW/1/
Screenshot:
Since your form is floated, try clearing it by putting overflow: auto; on a parent of the form, such as .box.
Related
I have the following html code for a page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buy, Sell Anywhere!</title>
<?php
$bgimglist = array(
"1419761599136.jpg",
"123.jpg",
"6Edng.jpg",
"second-hand-smoke-2-390x285.jpg",
"AllSmoke.jpg",
"best-air-purifier-for-smoke.jpg",
"HTB1pZmkG.jpg",
"images.jpg",
"index.jpg",
"SmokerBearded.jpg",
"sygareta.jpg"
);
$bgimg = $bgimglist[array_rand($bgimglist)];
?>
<style type="text/css">
body {
background-image: url(images/<?php echo $bgimg;?>);
background-repeat:no-repeat;
background-size:cover;
}
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>
<body>
<script language="JavaScript">
... removed...
</script>
<div id="top">
<div class="ad">
<?php include 'Ad728x90.inc';?>
</div>
<div id="TC">
<p>By using this site, you agree to the terms and conditions. You also agree that your government, local or national permits you to engage in activities relating to... <removed>...</p>
<p>You must be at least 18 years to use this site, regardless of your local laws. We do not encourage children to be associated in any way with this site.</p>
</div>
<div id="main">
And I have the following CSS:
.large {
font-size:30px;
}
body {
font-family:Arial, Helvetica, sans-serif;
}
#top {
font-size:300%;
font-weight:bold;
text-align:center;
padding:19px 0 6px 0;
}
.ad {
margin:auto;
padding:10px;
text-align:center;
}
.links a{
color:#FFF;
text-decoration:none!important;
}
#TC {
margin:auto;
width:90%;
height: 50px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
}
#main {
margin:auto;
width:90%;
height: 500px;
text-align:center;
font-size:12px;
background-color:#FFFFFF;
padding: 10px;
}
Most of the CSS may not be relevant, but I have included it for completeness. The problem is that the DIV with the id "TC" appears to have bottom padding on the web using Firefox, Chrome and IE; but not on my mobile using Chrome. In fact, some text is cutoff, so it appears to have a negative padding!
Slightly troubling (maybe this is a different issue) is that the padding on top looks bigger than the padding at the bottom on all browsers, but using Inspect Element in Firefox, the Box Model shows a 10px border for bottom and top.
Any inputs appreciated as always.
It's doing that on smaller screens because the content is overflowing the #TC div,
you can make that div bigger, or use overflow: hidden, or overfow-y: scroll in your css.
For demonstration purposes I have included overflow-y: scroll
#TC {
margin:auto;
width:90%;
height: 60px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
overflow-y:scroll;
}
CODEPEN DEMO
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:10%;
width:100%;
position:absolute
}
#adv
{
background-color:Yellow;
height:100%;
width:35%
}
#flag
{
background-color:Red;
height:100%;
width:65%;
float:right
}
How do you make the flag div appear beside the adv div inside the header div?
#adv needs float:left, so it floats to the left (and #flag floats to the right, next to it, because of float: right).
try this
#header
{
background-color:Blue;
height:10%;
width:100%;
position:relative
}
#flag
{
background-color:Red;
height:100%;
width:65%;
position:absolute;
top:0;
right:0;
}
Try this:
Normally: (somebody please correct me if I'm wrong on this):
Widths and heights should be set in pixel height-width from the beginning instead of percentages because the code will be easier to work with later. Also, I'm sure both elements should float left because then the code will be again, easier to work with and will follow better code conventions. Also, I added margins for easier viewing. You can always delete them if you wish. Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="example1.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS:
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:90px;
width:1290px;
overflow: hidden;
}
#adv
{
background-color:Yellow;
height:80px;
width:840px;
margin: 5px;
float: left;
}
#flag
{
background-color:Red;
height:80px;
width:420px;
margin: 5px;
float:left;
}
Hi,
I am trying to code a design but I cannot get it aligned correctly no matter what I try it wont stay in the same place nicely.
Here is what it looks like
http://postimg.org/image/tuctjuglz/
Here is what it is meant to be like
http://postimg.org/image/4aajdev87/
and here is my code hopefully it can be fixed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a</title>
<link rel="stylesheet" type="text/css" href="style/css/reset.css"/>
<style>
body {
color:#ffffff;
background:#1f1f1f url(style/images/background.png) repeat-x center top;
}
.profileMidSection {
height:239px;
width:860px;
color:#ffffff;
background:#2e2e2e;
clear:both;
}
ul.profileMidSection {
list-style:none;
vertical-align:middle;
line-height:47px;
}
ul.profileMidSection li {
height:47px;
vertical-align:middle;
clear:both;
}
ul.profileMidSection li a{
height:47px;
width:175px;
background:#333333;
text-decoration:none;
color:#737373;
float:left;
text-align:left;
padding-left:25px;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:10.5pt;
margin-left:-40px;
}
ul.profileMidSection li a:hover{
color:#ffffff;
border-left:3px solid #83bdf2;
width:172px;
}
.profileCaption {
background:#3c3c3c;
width:200px;
height:35px;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:11pt;
color:#ffffff;
border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
}
</style>
</head>
<body>
<div class="profileMidSection">
<ul class="profileMidSection">
<li>Recommended Games</li>
<li style="margin-top:1px;">Your Friends Played</li>
<li style="margin-top:1px;">You Liked</li>
<li style="margin-top:1px;">Your Friends Liked</li>
<li style="margin-top:1px;">Disliked</li>
</ul>
<img src="games/images/caption1.png" />
<div class="profileCaption">Angry Birds™</div>
<img src="games/images/caption2.png" />
<div class="profileCaption">Mario Kart Pro™</div>
<img src="games/images/caption3.png" />
<div class="profileCaption">Lazy™</div>
</div>
</body>
</html>
Wrap each image and caption in a div with a class like game-thumb and float the class left. Then, enclose all games in another div container, and set overflow:hidden on it.
I'm trying to float two divs side by side no matter what the size of the screen is. At the moment in IE 7 if I resize the windows the one div drops below the other. I think its because div2 contains a table and as soon as the edge of the window hits the table it drops below the div1.
What I currently have works in IE9 and Firefox but it needs to work in IE6+7. I tried this solution CSS floats - how do I keep them on one line? but it didn't seem to help. Again I think this maybe due to the content that is inside these divs.
How to replicate it?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
#wrapper {
min-width:510px;
width: auto !important;
width: 510px;
border: 1px solid red; }
#div1 {
float:left;
color:blue;
width:500px;
border: 1px dashed purple;
height: 400px;}
#div2 {
margin-left:505px;
border:1px dashed purple;}
#div2 table{border: 1px dotted green;}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1" >
Sometimes I contain a table and sometimes I contain an object. Bother of which displays a chart
</div>
<div id="div2">
<table>
<tr>
<td> I am normally a report
asdfasdfads
dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks, today has been quiet hot but somehow a bit cooler than this time last year.
</td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
A live example can be found here http://jsbin.com/awijew/11
Remove the margin-left: 505px; on div2
give width as "%"
Like
#div1 {
float:left;
color:blue;
width:48%;
border: 1px dashed purple;
height: 400px;
}
#div2 {
width:48%;
border:1px dashed purple;
float:left;
}
#wrapper{
display: flex;
justify-content: space-between;
border: 2px dotted red;
padding: 20px;
}
#wrapper div{
width: 48%;
border: 2px dotted purple;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<div id="div1" >
Sometimes I contain a table and sometimes I contain an object. Bother of
which displays a chart
</div>
<div id="div2">
<table>
<tr>
<td> I am normally a report
asdfasdfads
dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks,
today has been quiet hot but somehow a bit cooler than this time last
year.
</td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
How would I change this to make the middle div expand vertically to fill the white space?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
height: 150px;
border-bottom: 2px solid #ff8800;
position: relative;
background-color: #c97c3e;
}
#middle {
padding-right: 90px;
padding-left: 90px;
padding-top: 35px;
padding-bottom: 43px;
background-color: #0F9;
}
#footer {
border-top: 2px solid #ff8800;
background-color: #ffd376;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
You can't get the actual div to expand to fill a gap without Javascript, but you can easily make it appear to do so. Move your rule background-color:#0F9; from #middle to #container. This will give you the behaviour you require (it will fill the gap when there is minimal content, and when there is lots of content it will expand down, pushing the footer with it).
If however you want the Javascript solution, the following code will work. Simply put this in your HTML head section:
<script type="text/javascript">
window.onload = function() {
var mid = document.getElementById('middle');
var foot = document.getElementById('footer');
mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px';
};
</script>
This is my backup answer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
height: 100%;
}
#container #header {
height: 50px;
background-color:#0F6;
}
#container #middle {
background-color: #66F;
}
#container #footer {
height: 20px;
background-color: #FF3;
}
</style>
</head>
<body>
<!-- Apology note to perfectionists: I'm sorry for using tables, but see this:
http://stackoverflow.com/questions/1703455/three-row-table-less-css-layout-with-middle-row-that-fills-remaining-space
A layout done with this table would be impossible with CSS. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container">
<tr id="header">
<td>h</td>
</tr>
<tr id="middle">
<td>m</td>
</tr>
<tr id="footer">
<td>f</td>
</tr>
</table>
</body>
</html>
#footer {
clear: both;
}
That should to the trick. The footer should alway appear below the column with the most content.
Personally I always add a CSS clear class in my templates and use them as breaks
.clear {clear:both;}
Then:
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<br class="clear" />
<div id="footer">
Footer
</div>
</div>
Tables will cause you more problems than they solve.
I think what you are looking for is sometimes called a sticky footer.
This page explains how it is done. What you would do is put your header and expanding content inside the wrapper he mentions.
I hope this helps you get your layout.