When I write <div name="a">Foo</div><div name="b">bar</div>, I want horizontal alignment instead of vertical alignment. How to do it? Is there a simple way to do that? By default, it is vertical alignment.
views:
268answers:
8
A:
These are not demonstrating "vertical alignment", they are block elements vs. inline elements.
The simple answer: use SPAN, not DIV
Diodeus
2009-11-11 15:27:15
What if the content of the divs wasn't just 'foo' and 'bar'? The question is perfectly valid.
Adriano Varoli Piazza
2009-11-11 15:31:09
When I replaced DIV with SPAN, I didn't see desirable result.
Steven
2009-11-11 15:51:54
+1
A:
Try this:
<div style="float:left;" name="a">Foo</div><div style="float:left;" name="b">bar</div>
Furthemore, you can set the width of each div:
<div style="float:left;width:30%;" name="a">Foo</div><div style="float:left;width:70%;" name="b">bar</div>
Paul
2009-11-11 15:28:41
+3
A:
Set the divs to inline-block:
.a, .b {
display: inline-block;
}
This assumes elements with classes of a and b, not names like in the HTML you posted. With this method you can also line up the elements vertically using the vertical-align property, i.e. align to the top, middle or bottom:
+---+
| | +---+
| A | | B |
| | +---+
+---+
DisgruntledGoat
2009-11-11 15:30:12
+1
A:
You can either use a SPAN tag to wrap your Foo and bar elements, or you can set the CSS 'display' attribute for each div to be 'inline-block'.
<div name="a" style="display:inline-block">Foo</div>
<div name="b" style="display:inline-block">bar</div>
ianpoley
2009-11-11 15:30:22
A:
This should do it:
<div name="a" style="float:left; width: 100px;">Foo</div>
<div name="b" style="float:left; width: 100px;">bar</div>
<div style="clear:both"></div>
marcgg
2009-11-11 15:31:11
A:
You could always do absolute positioning with stylesheets to make your divs line up on the same row. For example:
<!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>Untitled Page</title>
<style type="text/css">
#logo
{
background: #000000;
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 200px;
}
#Banner
{
background: #1071A6;
position: absolute;
left: 250px;
top: 0;
width: 850px;
height: 250px;
}
</style>
</head>
<body>
<div id="logo">
</div>
<div id="Banner">
</div>
</body>
</html>
Chris
2009-11-11 15:37:00
I know I can. But it is somewhat complicated.I need a simple yet elegant solution.
Steven
2009-11-11 15:46:15
Elegant solution? I'm not sure what you're looking for. Pretty much all of the answers so far given will work to produce what you're asking for. Or is there something more that we're missing here?
Chris
2009-11-11 15:51:33
+2
A:
The default display mode for a div is "block" which includes a line break before and after the div. If you dont want the line breaks you can change the display property to inline which should align them horizontally as long as there is enough width in the parent element to contain both divs.
Display Proprties: http://www.w3schools.com/css/pr_class_display.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<div style="width:510px; background-color:#ffee88;">
<div style="display:inline; background-color:#ffeeff;">
check check 1 2
</div>
<div style="display:inline; background-color:#eeffff;">
hello this time
</div>
</div>
</html>
OrionRobillard
2009-11-11 15:38:12
A:
Given:
<div id='someSectionOfMyPage'>
<div name="a">Foo</div>
<div name="b">bar</div>
</div>
Add to your stylesheet:
#someSectionOfMyPage div {
display: inline-block;
}
Check these examples of css positioning as well.
eglasius
2009-11-11 17:23:30