This looks like IE8 issue. I have two divs that are side by side because I float one of them to left. However, if the content inside of right div gets too big for the window, the right div breaks line and goes under left div. How do I make both divs stay on same level, side by side?
Here is the code:
css:
<style type="text/css">
#left_div
{
float: left;
width: 250px;
height: 400px;
border: solid 1px red;
}
#right_div
{
width: 3000px;
border: solid 1px blue;
}
</style>
html:
<div id="left_div">
text in left_div
</div>
<div id="right_div">
text in right_div
</div>
Add float: left to the right_div as well.
If it is anything similar to the examples shown by Matthew James Taylor and his Perfect 2 Column Left Menu take a look at how he is doing it and maybe copy it!
IE has in the past also had the issue that it took height and width to mean height-min and width-min, thus still allowing boxes to resize eventhough they had specific limits set. See Webcredible's article, most notably number 2 on their list!
You can also add a left margin of at least 250px (the width of the left_div) to the right_div, that way there will always be space for the left_div next to the right_div.
change the doctype: (IE8 needs it to render correctly the webpage)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " > <html xmlns="h t t p://w w w.w3.org/1999/xhtml" xml:lang="en-GB">
(I edited the urls with whitespaces so don't forget remove them :) )
Related
I have this simplified code:
<div class="container">
<input type="submit" name="submit" class="submit" value="Sign Up">
</div>
And the CSS for it:
input.submit{
padding-left: 40px;
padding-right: 40px;
float:right;
}
.container{
background-color: #AAA;
float:right;
padding: 50px;
}
I expect the div to wrap around the input button, float to the right, and its size is equal to the button's size + the padding (50px). In other browsers it works perfectly, but there are 2 strange things happen in IE7:
The width of the div stretches to the whole webpage. If I remove float:right from CSS of input.submit, then the size of the div is correct.
The input button's width is also much larger than when the button is displayed in other browsers.
This is the doc type I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Anyone know why these problems happen and how to solve them?
I don't see why you need float: right on input.submit, so just remove it. If there is a reason you need it, you'll have to show me why - there might be a workaround.
To fix the second problem, add overflow: visible to input.submit.
After those two changes, it looks virtually the same in IE7 and IE9: http://jsfiddle.net/33vmm/
I'm creating a full screen (html, body {height: 100%}) web application and have a screen which has a form in the top (approximately) half, and some other information with two buttons in the bottom (approximately) half.
What I'm wanting to do (being a touch screen in an industrial environment) is to make these buttons as big as possible. So they have height: 50% inside the bottom container.
The question is: how do I get the top half to take the height it requires, and the bottom to take the rest? i.e. is it possible with CSS (2.1 preferably, but 3 is good too)?
There's no way to make an element in CSS 2.1 to take up the rest of the space vertically. Block elements, like Div tags, will automatically stretch out to fill a space horizontally, but won't do it height-wise. This means that you can't get something, like a content page or your buttons, to stretch out to fill rest of the empty space.
The best way to achieve something like this is with tricks, or knowing exactly how high each element will be. For instance, if you know the exact percentage that the other elements will be, you can hard-code a percentage into your stylesheet as described, here. Another trick would be by making the bottom element fill the entire window, and hiding the top half with the form.
Tables, however, are the only elements which will stretch to fill a vertical space. That might be the only solution available to you. An example of this is shown below:
<form ...>
<table id="container">
<tr><td id="top">Form elements go here</td></tr>
<tr><td>Buttons go here</td></tr>
</table>
</form>
And the CSS:
#container {
height: 100%;
width: 100%;
}
#top {
height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}
.buttons {
height: 100%; /* Used to stretch the buttons to fill the element. */
}
the HTML:
<div id="c">
<div id="topHalf"></div>
<div id="bottomHalf"></div>
</div>
the CSS:
#c {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#topHalf, #bottomHalf {
height: 50%;
width: 100%;
background: #00f;
}
#bottomHalf {
background: #f00;
}
You can place your buttons inside the bottom half.
try something like this :-
<html style="height: 100%">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%">
<div id="top" style="background-color: #cccccc; height: 50%">form here</div>
<div id="bottom" style="background-color: #eeeeee; height:50%">buttons here</div>
</body>
essentially height:100% just tells the div to be as big as its parent, and this carries on up the chain of parent objects. you'll notice that if you remove the height:100% on the html tag that all the inner children will just collapse up.
hth
EDIT: I just realised this is appropriate if using tables. If using a div then it's a little harder... a JavaScript function to manipulate the height of the bottom element using the style property in the element. Have a look at this previous question that may help with the JavaScript
ORIGINAL ANSWER
Try putting in the CSS for the bottom half of the application
min-height:50%;
Then specify no height in the top half section.
This will mean the bottom half with the buttons will be at least 50% of the screen area being able to become bigger as required and the bottom half will take the remaining section.
Personally I make this a little smaller than what I expect to use, e.g. instead of 50% I may use 30%, this means I'm getting the most out of my screen real estate but it may not be appropriate in your app.
I hope this helps ;-)
I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.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>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye
The following are 2 div, side by side. But once a width: 100px is added to #right, they won't be side by side any more. The second div will wrap to the next line. The browser's width is like 1200px, so it is not a concern, and this happens on both Firefox and Chrome. What is a reason for that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<style>
#left {
width: 100px;
float: left;
}
#right {
}
</style>
<div id='left'>
hello
</div>
<div id='right'>
world
</div>
Floats are funny things in CSS. They can easily cause this kind of confusion.
I recommend using display:inline-block; (on both the divs) instead of float:left; in your example. It'll probably behave closer to how you're expecting.
Add float:left to the #right, it will fix the problem. Divs are positioned on new lines if the float is not specified.
Does anyone know how to make Block 3 not to go under Block2.
I would like Block3 to show under Block 1, and Block 4 then would go on the right of Block 3.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
<title>Test</title>
<style type="text/css">
/* in the style below the width and border and margin must not be modified */
div.float_box {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px;}
p.clear {clear: both; height: 0px;}
</style>
</head><body>
<!-- This outside div must not be touched or modified -->
<div style="width: 300px; padding: 10px; border: 1px dashed #cccccc;">
<!-- Blocks' height must not be modified by adding contents or setting styles -->
<div class="float_box">Block 1<br><br><br><br><br></div>
<div class="float_box">Block 2<br><br></div>
<div class="float_box">Block 3<br><br><br><br><br><br><br><br></div>
<div class="float_box">Block 4<br><br></div>
<p class="clear"></p>
</div>
</body></html>
Thanks!
This obviously is only an example, but I need a solution that works idipendently from the length of the blocks, and indipendently from the number of the blocks.
Someone suggested to use "clear: both", on block 3, but this would solve only this particular case, what if I had another block 5 of the same height or longer than block 3 and after another block 6, the problem would rise up again and to fix it I would have to set manually the clear both on block 5. I need a general solution, because I don't know in advance length and number of blocks (coz they are dynamically generated from a DB).
I would like to see all my blocks be displaied one close to the other (separated simply by the margin 10xp I set) while fitting into the outside div 300px box. Moreover the otside div box of 300px could expand and blocks inside should reposition themeselves adapting to the new size (for example by fitting into three/four columns).
You should be able to add another class ("clear"?) to the Block 3 div, with a definition of:
div.clear { clear:both; }
Of course, CSS doesn't always behave as you initially expect...
I changed the block3 class to this (added clear:left;) and that gives you the result you were looking for.
div.block3 {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px; clear:left;}
EDIT:
Since this is now known to be a dynamically generated scenario due to clarification of the question the solution is to count up the total number of blocks that will need to be generated at run time and then add the clear attribute where appropriate. If you can't find out how many boxes you will have before you generate the HTML there is no way you can make the layout work.
For instance if you have five blocks then you would have to add clear attributes to boxes 3 and 5 to make sure they clear their left hand neighbors (in the case of a two column solution).
If the box could expand and change to a three or four column layout then you have other issues. You really can't have both a fixed layout and an expandable layout in the case where you trying to position columns.