So I noticed the column property doesn't work in internet explorer so I tried finding alternate ways to create columns, I found a way to do it with tables, but that looks a bit clunky. Is there a way to use divs and create two vertical columns splitting the page?
You can do this easily with floats. e.g.:
HTML:
<div class="col1">Column1</div>
<div class="col2">Column2</div>
CSS:
.col1 { width: 50%; height:100px; float:left; background:#ddd}
.col2 { width: 50%; height:100px; float:left; background:#777}
Demo: http://jsfiddle.net/AfgAG/9/
You can put two div tags next to each other and give one the float:left CSS property, and the other float:right. Both of those divs must be at the same level in your DOM tree. What I mean by that: basically, both div tags must be 'next' to each other when you write the HTML, so that one is not inside of a tag that the other is not. For example:
<div> stuff </div> <div> more stuff </div> is okay, but
<div> stuff </div> <div> <div> more stuff </div> </div> would require the outer div tags to be labeled with float:left or float:right, not the inner div that directly contains 'more stuff'.
Hope that helps!
You can use column-count although not in IE before 10. With prefixes it works in everything else.
Is float not working for you?
Related
I'm trying to determine the best way to format two columns of text like this using CSS:
(take the ----- as spaces)
dfasfasdfsa ------------ fdafsadfasdfasdf
fdsafadsfaf ------------ fadsdsafasfsaf
fdfgfgdsdffd ----------- fgdhfjshkjahjkh
fdljkgjklkj --------------- jfkldjskafljaf
I could brute force position it, but I'm sure there must be an easier way..any advice? Sorry for the beginner question.
Use two division tags and set their float property
<div style='float:left; width:30%'>
Put your content here...
</div>
<div style='float:left; width:40%; margin-left:30px'>
Put another content here...
</div>
With the float property, the two divs will be aligned sideways, the margin-left property will give a margin between the two division.
You could optionally put the CSS in a separate file, then use id or class to reference it.
css3 columns work on modern browsers, no support for IE8 or under.
http://www.quirksmode.org/css/multicolumn.html
https://developer.mozilla.org/en/CSS3_Columns
You can define the number of columns and the space between columns:
div {column-count:2; column-gap: 20px;}
Alternatively, the jQuery columnizer plugin works cross browser:
http://welcome.totheinter.net/columnizer-jquery-plugin/
I have extended Chibuzo's solution and here it is:
CSS:
.col1 {
float:left;
width:100px;
background-color: #E8F6F7;
}
.col2 {
float:left;
width:200px;
margin-left:30px;
background-color: #f2dede;
}
HTML:
<div class="col1">
<div>Monday:</div>
<div>Tuesday:</div>
<div>Wednesday:</div>
</div>
<div class="col2">
<div>open 8am to 5pm</div>
<div>open 9am to 4pm</div>
<div>open 9am to 6pm</div>
</div>
and it looks like this:
I had been trying to do it with CSS position, relative and absolute, which is possible but can be rather frustrating.
I have this fiddle
http://jsfiddle.net/JsZ9q/5/
I am trying to get the div with the 'b' letters to have its left edge be up against the right edge of the div with the 'a' letters.
The trick is, in the actual application, the left property of the left div is not set (meaning its left position will change), and there is variable number of a characters (meaning its width will change).
Update -- i added some more divs to be more clear. In all cases, I want the 'right' div to have its left edge up against the right edge of the left div, which can vary in width due to its content. Also, not shown, is that the left property of the left div can vary across rows.
Try:
<html>
<head></head>
<body>
<div>
<div style="display:inline">b</div>
<div style="display:inline">a</div>
</div>
</body>
</html>
Note: Span are inherently inline:
The above should behave the same as this:
<html>
<head></head>
<body>
<div>
<span>b</span>
<span>a</span>
</div>
</body>
</html>
Edit: Based on fiddler
Remove the absolute position from div's in the style sheet.
Don't put white space between the div's this includes newline (as multiple white space will be replaced by a single space but this has size).
<div style="top:10px">
<!-- ^^^^^ No absolute here -->
<div style="display:inline">aaaa</div><div style="display:inline">bbbb</div>
<!-- ^^^^^^ No Space here -->
</div>
See here:
http://jsfiddle.net/sNqpP/ Where I have changed it for the first line aaaabbbb but not for the others.
Your solution:
http://jsfiddle.net/JsZ9q/9/
Add float: left;, replace position: absolute; with position: relative; to make this work, and set margin-left (or left) to 0. You can ignore the clear attributes - I only added that for readability.
Btw, this example screws with the basic reasons CSS was separated from HTML - HTML creates the structure; CSS provides the styling.
At no point should you EVER use the style attribute in your HTML, especially since the divs have a width that is only defined at runtime and you're only running this in CSS (no JS). And finally, avoid absolute positioning as much as possible.
Float does this:
.left {
float:left;
}
.right {
float:left;
}
http://www.w3schools.com/cssref/pr_class_float.asp
Or am I missing something in your question?
If you must use absolute positioning, you need to know the width of the leftmost div. That would involve some JS. Let me know if thats your problem.
use a wrapper for positioning: I Forked your Fiddle
You need to have a parent object with a width in order to float child objects right next to each other: http://jsfiddle.net/alanweibel/6aGbU/
<style type="text/css">
.wrap
{
width:100%;
}
.left
{
float:left;
}
</style>
<div class="wrap">
<div class="left">aaaa</div>
<div class="left">bbbb</div>
</div>
I am trying to make something look like following (don't concern color here. my concern here is the shape);
I tried something with following code but didn't succeed!
<html>
<head>
<style type="text/css">
#header{border:3px solid gray;padding:10px;}
#header-left-container{border:1px solid gray;float:left;width:30%;}
#header-right-container{border:1px solid gray;float:right;width:69%;}
</style>
</head>
<body>
<div id="header">
<div id="header-left-container">
pooo
</div>
<div id="header-right-container">
bla bla bla.....
</div>
</div>
</body>
</html>
I know this can be done with table easily but I don't wanna use table in my application where I can do the same with div elements.
any suggestion here?
http://jsfiddle.net/j4DnG/7/
What you need to do is clearing the area arround the 2 floated divs.
Doing this by modern technuiqe is giving the parent the property of Overflow:Hidden or Auto (what ever fitting you more. I recommend hidden)
In the past people user clearfix (google on that). Todays we use that approach.
As well people used to put clear:both after the creation of the two elements. That has a negative side- 1 more element in the dom.
You need to add overflow:auto; to the #header css; without that divisions don't expand to contain floated elements.
your code looks fine...
suggestions:
Just Add clearfix after floating divs so as they will be contained inside the parent object like:
<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>
Add
<br style="clear:both" />
after second div. Or make the container div float: left. Or use one of the css frameworks if You don't want to become css master before You create a webpage. One is http://960.gs/
Do you use firebug? go on twitter.com and see how they have defined a left and a right container is the style sheet . They're not using table to implement it. just div
Just replace the float: right; declaration with a margin-left: 30%; declaration for #header-right-container. You don't need to float both of them. This way, you will only need to clear floats if the left block is taller than the right block. See this fiddle.
OK so what would happen if I have 2 divs (one containing text, the other an image). The image always has a static width but the text varies. hence making its containing div variable.
I can make it work for all other browsers (except IE6 and IE7) by using CSS display:table. IE6 and 7 don't have that so I can't find a workable solution to center them all.
... so you know what I'm talking about...
.container{text-align:center; width:100%}
.container .centered{display:table; margin:0 auto}
<div class="container">
<div class="centered">
<div id="text">varying length text</div>
<div id="image">IMAGE</div>
</div>
</div>
Quite apart from the lack of IE support, setting display: table as you have without its children using display: table-row/table-cell results in undefined behaviour. It doesn't make sense to put block elements directly inside a table element and the browser might do anything at all.
What you are trying to do is get shrink-to-fit width behaviour without using float, which is a normal way of getting shrink-width but requires that the block in question goes to the left or right not centre. Probably a better way of saying that would be to use an inline-block:
.centered { text-align: center; }
.centered span { display: inline-block; border: dotted red 1px; }
<div class="centered">
<span id="text">varying length text</span>
</div>
<div class="centered">
<span id="image">IMAGE</span>
</div>
(You have to use a naturally-inline element like span to make it work under IE<8; div would fail. There is also -moz-inline-box if you need to target Firefox 2.)
Are you using quirksmode or standards compliant mode? In other words have you included a DOCTYPE declaration at the top of your html page?
You shouldn't need to use display:table just margin:auto should do the trick provided you are using a standards mode.
I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it.
However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary).
Basic HTML:
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a style="width:100px" to the div to match the image width.
Update: After a bit of searching and thinking, the best method seems to be using an inline width on the div. I will keep the width attribute on the image, in case I wish the div to be a bit wider than the image (for example to accomodate a longer caption).
This approach also means I could have two images side-by-side with a caption below. If I have a set of images the same size, I can of course add an extra style to each div.
Thanks to everyone who answered!
This could also be accomplished using 'display: table-caption' for the caption, as follows:
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
Stylesheet
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
This block can also be floated left of right of other text. I've tested this in IE8+. Here's a JSBin example: http://jsbin.com/xiyevovelixu/1
For setting the width to match the image automatically you could use
.figure {
display: table;
width: 1px;
}
This makes the div behave like a table (not supported in Internet Explorer). Or you could use a table instead of the div. I don't think there is another way of setting the width automatically.
Edit: The simplest way is to forget about the auto width and set it by hand. If it is really needed you can use JavaScript or a table. In this case the use of a table is not so ugly because you are addressing a limitation of the HTML version. In the case of server-side scripting you could also set the width when generating the page.
Stylesheet
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
note: to enable wrapping just remove that last css line
HTML
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.
I had the same problem and after reading this decided to use an inline-style on the surrounding element. Seems the better solution over using a table to me.
You can also acheive this using the following solution proposed by Temani Afif in his blog post (All credits to him, I just don't want the solution to be forgotten)
<div class="box">
<img>
<h1>Lorem ipsum dolor ..</h1>
</div>
.box {
display: inline-block;
}
h1 {
width: 0;
min-width: 100%;
}
Make the container inline-block, and makes the h1 (or whatever text tag you use) occupy the space dictated by the sibling element. It's essentially a hack, but it works! No unintended semantic consequences like the table solutions
You could use the display:table solution for all other browsers, and a CSS Behaviour for Internet Explorer.