If you run the simple HTML page found at:
http://ss.bigwavesoftware.net/2.htm
in IE8 and FireFox 3.5.8, the DIV's display differently. In IE they behave as block elements and FireFox they behave as inline elements. I need them to behave as inline in both browsers. Can someone suggest a workaround to make them display inline in IE8 as well as FireFox?
<html>
<body>
<div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
</div>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
</body>
</html>
Reverse the order of your divs and it will work. That is put the first one second and the second one first in the markup.
<html>
<body>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
<div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
</div>
</body>
</html>
Add a doctype at the very start of your document. It's being rendered in quirks mode. E.g.
<!doctype html>
<html>
... etc.
Oh, and what exactly do you mean by "behave as inline"? Do you simply mean you want them to appear side-by-side, or do you actually want the width and height to be ignored (as Tom pointed out)? Because you won't be able to do the latter for floated elements. The display: inline is useless on floats (except to fix IE6 bugs), because "inline" floats automatically turn into block.
You can't set height and width on inline elements. If you want the boxes to be laid out as they are in Firefox, remove the display: inline and float the left-hand box.
use float: left instead of float: none in the first div (the one on the left).
<html>
<body>
<div style="display: inline; float: left; width:100px; height:100px; border:1px solid red;">Left Box
</div>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
</body>
</html>
Related
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 7 years ago.
How to get your div to reach all the way down?
How to fill up the vertical space of parent div?
How to get equal length columns without using background images?
I spent a couple days googling and dissecting code to understand how to accomplish equal length columns as easy and efficient as possible. This is the answer I came up with and I wanted to share this knowledge with the community copy and paste style in a little tutorial.
For those that think this is a duplicate, it is not. I was inspired by several websites, among them http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks but the code below is unique.
For a simpler solution, you can give the parent display: table and its children display: table-cell, like this:
.parent {
display: table;
}
.child {
display: table-cell;
}
See DEMO.
Please note that this does not work in IE7, so if IE7 support is required, a more elaborate solution would be needed.
One of the tricky things in modern web design is to create a two (or more) column layout where all the columns are of equal height. I set out on a quest to find a way to do this in pure CSS.
You can easiest accomplish this by using a background image in a wrap-div that holds both of your columns (or the background of the page).
You can also do this by using CSS table cells, but unfortunately the browser support for this is still shady, so it's not a preferred solution. Read on, there is a better way.
I found my inspiration from two pages on the web, although I prefer my solution, since it gives me more freedom to use rounded corners and precise widths or percent layouts, and it is easier to edit, your final layout holding div is not forcing you to do negative number crunching.
== The trick: ==
First you create the background design cols, then you put a full width div that can hold your regular content. The trick is all about floated columns within columns, creating a push effect on all parent columns when the content extends in length, no matter what end column is the longest.
In this example I will use a 2 column grid in a centered wrap-div with rounded corners. I have tried to keep the fluff out for easy copy-paste.
== Step 1 ==
Create your basic web page.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== Step 2 ==
Create one floated div inside another floated div. Then apply a negative margin on the inside div to pop it out of its frame visually. I added dotted borders for illustrating purposes. Know that if you float the outside div to the left and give the inside div a negative margin to the left, the inside div will go under the page edge without giving you a scroll bar.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
this content obviously only fits the left column for now.
</div>
</div>
</body>
</html>
== Step 3 ==
In the inside div: Create a div without background that has the with of all the columns combined. It will push over the edge of the inside div. I added a dotted border for illustrating purposes.This will be the canvas for your content.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
float:left;
width:400px;
border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
this content spans over both columns now.
</div>
</div>
</div>
</body>
</html>
== Step 4 ==
Add your content. In this example I place two divs that are positioned over the layout. I also took away the dotted borders. Presto, that's it. You can use this code if you like.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</body>
</html>
== Step 5 ==
To make it nicer you can centered the whole design in a wrap div and give it rounded corners. The rounded corners wont show in old IE unless you use a special fix for that.
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
position:relative;
width:500px;
margin:20px auto;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</div>
</body>
</html>
== Inspiration sources ==
http://www.pmob.co.uk/pob/equal-columns.htm
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
I've dealt with divs collapsing on their content when using float positioning (e.g. solving with overflow:hidden), but am trying to learn absolute/relative positioning and can't figure out why the container div is collapsing. My test case:
<html>
<head>
<style type="text/css">
body {
background-color:#eee;
}
#content {
margin:0 auto;
position:relative;
border:1px solid red;
width:800px;
display:block;
background-color:white;
}
#header {
border:1px solid black;
background-color:#777;
color:white;
width:800px;
position:absolute;
left:0;
top:0;
}
#leftcol {
position:absolute;
border:1px solid black;
background-color:#ddd;
width:200px;
top:100px;
left:0;
}
#rightcol {
position:absolute;
top:100px;
left:205px;
border:1px solid black;
background-color:#ddd;
width:500px;
}
</style>
<title>CSS Positioning Example 1</title>
</head>
<body>
<div id="content">
<div id="header">
<h1>The Awesome Website</h1>
</div>
<div id="leftcol">
<h2>About</h2>
<p>
This website is so awesome because it was made by someone
and that is really all there is to it. There.
</p>
</div>
<div id="rightcol">
<p>This is where I'm going to put some real body text so that it goes
on and on for a while and so I can get a sense of what happens when
the text in the paragraph keeps going and the box containing it keeps
going on as well.
</p>
</div>
</div>
</body>
</html>
What's going on here? Why does the red-bordered content div collapse even though it contains the other divs?
It is because all of its content is styled as position:absolute. This takes those elements out of flow and (layout-wise) it's like they don't even exist. Consider using position:relative to position the content.
You really need to read these articles at A List Apart
CSS Positioning 101
CSS Floats 101
Your question is why the div with red borders don't expand to it's content. As Joseph said the problem is that you take the elements out of the document flow. Positioning an element absolutely make the element's position independent from it's parent and siblings.
I fixed your code using CSS float property. Take a look here.
I highly recommend you read those articles.
I have this anchor tag that has text between to be vertically align text. I'm using this css attribute vertical-align: middle. Nothing happens tho.
You can make it inline-block and give it a line-height:
a {
line-height: 50px;
display: inline-block;
}
JSFiddle with working example: http://jsfiddle.net/KgqJS/
vertical-align only works on elements with display: table-cell, and that property value isn't supported in < IE8.
Known text
If you know the text to be centred, it is rather easy. You have two options.
<style type="text/css">
#container {
padding: 10px 0;
}
</style>
<div id="container">
Example of some lovely<br />
multiline text.
</div>
You can use CSS's padding to add padding top and bottom, to make the text appear in the middle. This is useful for multiline text.
<style type="text/css">
#container {
height: 100px;
line-height: 100px;
}
</style>
<div id="container">
Example
</div>
You can exploit the line-height property to make the text vertically centred. This only works with one line of text. You can guess what happens if there is more than 1.
Dynamic multiline text
Here is where things start to get somewhat tricky, and may have you crying for tables.
<style type="text/css">
#container {
display: table-cell;
vertical-align: middle;
}
</style>
<div id="container">
<?php echo $content; ?>
</div>
Workaround for < IE8.
Source.
<div><p>test test test test<p></div>
div{
border:1px solid red;
width:400px;
height:400px;
position:relative;
}
p{
height:30px;
position:absolute;
top:50%;
margin-top:-15px; /* negative half of height*/
}
Check working example at http://jsfiddle.net/Z2ssq/1/
I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
I've been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.
My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I've mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?
Thanks, Matt
<style>
.left {
width:100px;
float:left;
border: solid black 1px;
}
.right {
width: 100px;
margin-left:100 px;
border: solid red 1px;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
Since this is a community wiki. I thought I'd post the working code with the solution proposed below by Plan B.
<style>
.left {
width:100px;
border: solid black 1px;
float:left;
}
.right {
width:100px;
border: solid red 1px;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
<div class="clear"></div>
c
Float them both left, add the following after both divs:
<div class="clear"></div>
.clear { clear: both; }
That or use padding instead of margins.
.body {
padding:0px;
margin:0px;
}
It is the double margin float bug. Described well here:
http://www.positioniseverything.net/explorer/doubled-margin.html
Try adding display: inline to floated divs. I believe this is an IE bug of adding more margins to floated elements. display: inline worked for me in the past. Hope this helps.