we can do this like
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
<span> ?
I just tend to make them fixed widths so that they add up to the total width of the page - probably only works if you are using a fixed width page. Also "float".
An inline div is a freak of the web & should be beaten until it becomes a span (at least 9 times out of 10)...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...answers the original question...
You should use
<span>instead of<div>for correct way of inline. because div is a block level element, and your requirement is for inline-block level elements.
Here is html code as per your requirements :
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
display:inline-block;float:left;so you've to change display property display:inline-block; forcefully
Example one
div {
display: inline-block;
}
Example two
div {
float: left;
}
you need to clear float
.main-div:after {
content: "";
clear: both;
display: table;
}
You need to contain the three divs. Here is an example:
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}
Note: border-radius attributes are optional and only work in CSS3 compliant browsers.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Note that the divs 'foo' 'bar' and 'baz' are each held within the 'contain' div.
<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */
I just tend to make them fixed widths so that they add up to the total width of the page - probably only works if you are using a fixed width page. Also "float".
Just use a wrapper div with "float: left" and put boxes inside also containing float: left:
CSS:
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}
HTML:
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>
You need to contain the three divs. Here is an example:
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}
Note: border-radius attributes are optional and only work in CSS3 compliant browsers.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Note that the divs 'foo' 'bar' and 'baz' are each held within the 'contain' div.
I would use spans or float the div left. The only problem with floating is that you have to clear the float afterwards or the containing div must have the overflow style set to auto
As mentioned, display:inline is probably what you want. Some browsers also support inline-blocks.
Having read this question and the answers a couple of times, all I can do is assume that there's been quite a bit of editing going on, and my suspicion is that you've been given the incorrect answer based on not providing enough information. My clue comes from the use of br tag.
Apologies to Darryl. I read class="inline" as style="display: inline". You have the right answer, even if you do use semantically questionable class names ;-)
The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking.
If you're wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline.
Floated divs:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline divs:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
If you're after the former, then this is your solution and lose those br tags:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
note that the width of these divs is fluid, so feel free to put widths on them if you want to control the behavior.
Thanks, Steve
An inline div is a freak of the web & should be beaten until it becomes a span (at least 9 times out of 10)...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...answers the original question...
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */
I would use spans or float the div left. The only problem with floating is that you have to clear the float afterwards or the containing div must have the overflow style set to auto
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div>
You should use
<span>instead of<div>for correct way of inline. because div is a block level element, and your requirement is for inline-block level elements.
Here is html code as per your requirements :
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
display:inline-block;float:left;so you've to change display property display:inline-block; forcefully
Example one
div {
display: inline-block;
}
Example two
div {
float: left;
}
you need to clear float
.main-div:after {
content: "";
clear: both;
display: table;
}
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Having read this question and the answers a couple of times, all I can do is assume that there's been quite a bit of editing going on, and my suspicion is that you've been given the incorrect answer based on not providing enough information. My clue comes from the use of br tag.
Apologies to Darryl. I read class="inline" as style="display: inline". You have the right answer, even if you do use semantically questionable class names ;-)
The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking.
If you're wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline.
Floated divs:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline divs:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
If you're after the former, then this is your solution and lose those br tags:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
note that the width of these divs is fluid, so feel free to put widths on them if you want to control the behavior.
Thanks, Steve
<span> ?
As mentioned, display:inline is probably what you want. Some browsers also support inline-blocks.
ok, for me :
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
An inline div is a freak of the web & should be beaten until it becomes a span (at least 9 times out of 10)...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...answers the original question...
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div>
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
ok, for me :
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
Try writing it like this:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>_x000D_
<div style="display: inline">b</div>_x000D_
<div style="display: inline">c</div>we can do this like
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
<span> ?
Try writing it like this:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>_x000D_
<div style="display: inline">b</div>_x000D_
<div style="display: inline">c</div>Having read this question and the answers a couple of times, all I can do is assume that there's been quite a bit of editing going on, and my suspicion is that you've been given the incorrect answer based on not providing enough information. My clue comes from the use of br tag.
Apologies to Darryl. I read class="inline" as style="display: inline". You have the right answer, even if you do use semantically questionable class names ;-)
The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking.
If you're wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline.
Floated divs:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline divs:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
If you're after the former, then this is your solution and lose those br tags:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
note that the width of these divs is fluid, so feel free to put widths on them if you want to control the behavior.
Thanks, Steve
Use display:inline-block with a margin and media query for IE6/7:
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
I think you can use this way without using any css -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
Right now you are using block level element that way you are getting unwanted result. So you can you inline element like span, small etc.
<span>foo</span><span>bar</span><span>baz</span>
Use display:inline-block with a margin and media query for IE6/7:
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
Having read this question and the answers a couple of times, all I can do is assume that there's been quite a bit of editing going on, and my suspicion is that you've been given the incorrect answer based on not providing enough information. My clue comes from the use of br tag.
Apologies to Darryl. I read class="inline" as style="display: inline". You have the right answer, even if you do use semantically questionable class names ;-)
The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking.
If you're wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline.
Floated divs:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline divs:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
If you're after the former, then this is your solution and lose those br tags:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
note that the width of these divs is fluid, so feel free to put widths on them if you want to control the behavior.
Thanks, Steve
Try writing it like this:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>_x000D_
<div style="display: inline">b</div>_x000D_
<div style="display: inline">c</div>As mentioned, display:inline is probably what you want. Some browsers also support inline-blocks.
As mentioned, display:inline is probably what you want. Some browsers also support inline-blocks.
Just use a wrapper div with "float: left" and put boxes inside also containing float: left:
CSS:
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}
HTML:
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>
I think you can use this way without using any css -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
Right now you are using block level element that way you are getting unwanted result. So you can you inline element like span, small etc.
<span>foo</span><span>bar</span><span>baz</span>
An inline div is a freak of the web & should be beaten until it becomes a span (at least 9 times out of 10)...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...answers the original question...
Try writing it like this:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>_x000D_
<div style="display: inline">b</div>_x000D_
<div style="display: inline">c</div>I know people say this is a terrible idea, but it can in practice be useful if you want to do something like tile images with comments underneath them. e.g. Picasaweb uses it to display the thumbnails in an album.
See for example/demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html ( class goog-inline-block ; I abbreviate it to ib here )
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }
Given that CSS, set your div to class ib, and now it's magically an inline block element.
<span> ?
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Source: Stackoverflow.com