Given this HTML:
<div>foo</div><div>bar</div><div>baz</div>
How do you make them display inline like this:
foo bar baz
not like this:
foo
bar
baz
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...
That's something else then:
div.inline { float:left; }
.clearBoth { clear:both; }
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->
Try writing it like this:
div { border: 1px solid #CCC; }
<div style="display: inline">a</div>
<div style="display: inline">b</div>
<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>
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>
You've two way to do this
using simple display:inline-block;
or using 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;
}
As mentioned, display:inline is probably what you want. Some browsers also support inline-blocks.
http://www.quirksmode.org/css/display.html#inlineblock
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>
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>
<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>
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.
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
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 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 elements that way you are getting an unwanted result. So you can you inline elements like span, small etc.
<span>foo</span><span>bar</span><span>baz</span>
This is what worked for me. I was working with bootstrap and I wanted to have radio buttons inline:
<div class="form-group form-inline-radio">
<div class="form-check form-radio-outline form-radio-primary mb-3">
<input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
<label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
</div>
<div class="form-check form-radio-outline form-radio-primary mb-3">
<input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
<label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
</div>
</div>
And the CSS:
.form-inline-radio {
display: flex;
overflow: hidden;
}
.form-check {
margin-right: 10px;
}
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>
<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>
http://jsfiddle.net/f8L0y5wx/
<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".
Related
Hi I have the following html code and this is part of the html
<div class="template-page-wrapper">
<div class="templemo-content-wrapper">
<div class="templatemo-content">
<div class="templatemo-panels">
<div id="dPopupBG" class="popup_BG"></div>
<div style="height:100px;"><div>
<div id="MainContent" class="msg" style="display: none;">
<div class="error display" style="display:none"><span></span></div>
<div id="MainDocContent" class="flex">
(and Here page content having more html details)
</div>
</div>
</div>
</div>
</div>
There is a more space between the header line and the MainDocContent. When I focus using inspect on the empty space then the inspect element is highlighted to below tag
<div style="height:100px;"><div>
I tried the below css to adjust the height in the css file but the height is not getting modified
#dPopupBG+div{height:80px}
I am trying to find the solution and learn in the process.
In CSS you only can override an inline property by adding !important
#example+div{
height:80px;
background-color:orange!important;
}
<div id="example"></div>
<div style="background-color:black;"><div>
Override inline style is by using !important keyword With the CSS rule.
#dPopupBG + div
{
height:80px!important;
background:red;
}
<div class="template-page-wrapper">
<div class="templemo-content-wrapper">
<div class="templatemo-content">
<div class="templatemo-panels">
<div id="dPopupBG" class="popup_BG"></div>
<div style="height:100px;"><div>
<div id="MainContent" class="msg" style="display: none;">
<div class="error display" style="display:none"><span></span></div>
<div id="MainDocContent" class="flex">
(and Here page content having more html details)
</div>
</div>
</div>
</div>
</div>
One option is as follows, with explanatory comments in the code:
/* a simple set of rules to remove default margin and padding
from elements, and to size elements with an algorithm that
includes padding and border sizes in the defined width: */
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
/* to visualise the HTML structure: */
border: 1px solid #000;
/* to center the elements in the inline axis: */
margin-inline: auto;
/* to apply some spacing around the contents/descendants
of an element: */
padding: 0.5em;
/* to show the parent-child hierarchy for visualisation: */
width: 90%;
}
/* selects all <div> elements with a class attribue,
and styles the ::before pseudo-element: */
div[class]::before {
/* shows the contents of that attribute in the
::before pseuedo element; again for visualisation: */
content: attr(class);
}
/* this selects all <div> elements with a "style" attribute
with an attribute-value that includes the string
"height:100px", or "height: 100px" (note the white-space):*/
div[style*="height:100px"],
div[style*="height: 100px"]{
/* purely to visualise the element if it's not successfully
hidden: */
background-color: red;
/* "hiding" the element by setting its display to "none";
this avoids having to use "!important" to override the
height (which may have other consequences), but is fragile
as it's based on a predetermined/known "height" property-value: */
display: none;
}
<div class="template-page-wrapper">
<div class="templemo-content-wrapper">
<div class="templatemo-content">
<div class="templatemo-panels">
<div id="dPopupBG" class="popup_BG"></div>
<div style="height:100px;">
<div>
<div id="MainContent" class="msg" style="display: none;">
<div class="error display" style="display:none"><span></span></div>
<div id="MainDocContent" class="flex">
(and Here page content having more html details)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS Fiddle demo.
References:
attr().
Attribute Selectors.
border.
::before.
content.
margin-inline.
I want to show the text "You save ..." in a new line. I do not how to do. Please guide me. Please click for more details jsfiddle code
<div class="product-wrap first">
<div class="item">
<div class="product-image">Img area
</div>
<div class="product-content">
<div class="product-name"> <a class="fontcolor" href="#">Motorcycle Leather Boots (4Riders Boots Always)</a>
</div>
<div class="price-box">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p> <span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u></em></span>
</div>
<div class="clr"></div>
</div>
</div>
</div>
Make use of <br/> tag here! It breaks the line
DEMO
UPDATE
Add below properties to your .product-wrap .item .price-box class css
DEMO
.product-wrap .item .price-box {
margin-top: 6px;
overflow: hidden;
width:auto; //Set this
float:left; //and keep it float left
}
span.div-discount {
/* display: block; */
clear: left;
display: block;
}
just add this to your css it will work
here is the demo please look out
DEMO
Add Css
.div-discount b, .div-discount em{display:block;}
Your paragraphs are set to float, which is fine, but you will need to clear and wrap it in a div and set that div to block so it extends the fill width.
Then you want to set the div-discount class to block too.
CSS:
.amounts {
display: block;
}
.div-discount {
color: #b50016;
display: block;
}
.clr-both {
clear: both;
}
HTML:
<div class="amounts">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p>
<div class="clr-both"></div>
</div>
<span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u>
See jsFiddle
The b element in HTML stands for bold. Add the rule in CSS defines is display as inline. It means the elements which possess inline or inline-block properties will be shown on same line. So If we want to show our custom text on a new line, we have to change its style from display inline to display as block.
.div-discount b{ display:block;}
I'm trying to make two divs to be one on top of another, like this:
The fiddle:
<!-- CSS -->
.table {
display:table;
}
.div1 {
display:table-cell;
vertical-align:middle;
}
.div2 {
display:table-cell;
vertical-align:bottom;
}
<!-- /CSS -->
<div class="table">
<div class="div1">
Top
</div>
<div class="div2">
Bottom
</div>
</div>
Put a wrapper element with display: table-row; in each table-cell element you want to isolate. This will stack the cells in different rows, one on top of the other.
And don't use tables for your layout ... here's why: Why not use tables for layout in HTML?
when I did the fiddle.... I came up with this (no css)
<div>
<div align='center'>
<div>
Socrates (this should be on top of his head)
</div>
<div>
<img src="http://www.mrdowling.com/images/701socrates.png"/>
</div>
</div>
</div>
Try this:
Html:
<div class="table">
<div class="align-middle">
Socrates (this should be on top of his head)
<img src="http://www.mrdowling.com/images/701socrates.png"/>
</div>
</div>
CSS:
.table {
display:table;
}
.align-middle {
display:table-cell;
vertical-align:left;
}
Quick CSS question that I can't figure out...and am a little surprised that I can't.
I'm trying to create a 2X2 grid of 4 boxes that touch each other with no margin in between; see the image:
However, when I implement the code below, I get a vertical line down the middle that I just can't get rid of.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
#dash-container {
width: 209px;
}
.dash-object {
display: inline-block;
height: 100px;
text-align: center;
vertical-align: middle;
width: 100px;
}
#dash-edit{background:#FF7700;}
#dash-conference{background: #55bbff;}
#dash-upgrade{background: #333333;}
#dash-logo{background: #ffff00;}
</style>
</head>
<div id="dash-container">
<div id="dash-logo" class="dash-object"><span>Logo</span></div>
<div id="dash-conference" class="dash-object">Conference</div>
<div id="dash-edit" class="dash-object">Edit</div>
<div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>
</html>
If you want to play with the html, you can find it here.
Thanks for any pointers.
Inline elements are sensitive to white space. Remove it:
<div id="dash-container">
<div id="dash-logo" class="dash-object"><span>Logo</span></div><div id="dash-conference" class="dash-object">Conference</div>
<div id="dash-edit" class="dash-object">Edit</div><div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>
jsFiddle example
Or by using HTML comment tags:
<div id="dash-container">
<div id="dash-logo" class="dash-object"><span>Logo</span>
</div><!--
--><div id="dash-conference" class="dash-object">Conference</div>
<div id="dash-edit" class="dash-object">Edit</div><!--
--><div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>
jsFiddle example
Or by floating the inner divs:
#dash-container div {
float:left;
}
jsFiddle example
I have the following HTML:
<div>
<div class="float-left gutter-right">
xx
</div>
<div class="float-left gutter-right">
yy
</div>
</div>
<div>
zz
</div>
I would like to have xx and yy appear next to each other and zz appear below. But this is not what is happening.
How can I make it so the zz appears below?
Approach 1
Use float: left + clear: both.
HTML:
<div>
<div class="float-left gutter-right">xx</div>
<div class="float-left gutter-right">yy</div>
</div>
<div class="clear">zz</div>
CSS:
div.float-left { float: left; }
div.clear { clear: both; }
Explanation:
I used the class float-left of the first 2 divs so that they may come in one line. Then I add a class of .clear to the last div so that I could bring it in a seprate line where it will have no object floating neither left or right of it.
Demonstration 1.
Approach 2
Use display: inline.
HTML:
<div>
<div class="float-left gutter-right inline">xx</div>
<div class="float-left gutter-right inline">yy</div>
</div>
<div class="clear">zz</div>
CSS:
div.inline { display: inline; }
Explanation:
I have added a class .inline to the first 2 divs and applied the style display: inline to this class and so those two first div will be displayed inline and then you don't need to clear:both the last div.
Demonstration 2.
Use float:left; to the float-left class, and clear: both; to the bottom div
The html:
<div class="float-left gutter-right">
xx
</div>
<div class="float-left gutter-right">
yy
</div>
<div id="bellow">
zz
</div>
The css
.float-left {width: 50%; float: left;}
#bellow { clear: both;}
Depends of the implementation of your float-left class. You need some clearing to get zz under xx and yy.
CSS
div div:first-child{
float:left;
}
It seems that you are using float:left on the DIVs that you want to display next to each other, which is ok, but you have to make sure their widths combined is smaller than 100%, so they fit.
Try this:
HTML:
<div>
<div class="inline-div">
xx
</div>
<div class="inline-div">
yy
</div>
</div>
<div>
zz
</div>
CSS
.inline-div {
float:left;
width:50%;
}
See the fiddle here
<div>
<div class="float-left gutter-right">xx</div>
<div class="float-left gutter-right">yy</div>
<div class="clear"></div>
</div>
<div>zz</div>
Then make ur css look like this
div.float-left { float: left; }
div.clear { clear: both; }
This would also work, with any combination of selector and decleration. Add this to your CSS:
.gutter-right {
display: inline;
}
or
.float-left {
display: inline-block;
}