I have a small problem with these <span>
elements in a <div>
.
http://jsfiddle.net/kkzLW/179/
Here is the section of CSS code that I'm working with:
.rightRapper {
border-style: dotted;
margin-left: 105px;
margin-top: 0px;
height: 90px;
width: 100px;
display: block;
}
.leftRapper {
border-style: dotted;
margin-left: 0px;
height: 90px;
width: 100px;
display: block;
}
Here is the HTML section:
<div id="battleBox">
<span class="leftRapper">
<span id="buttonColumn">
<span id="container3" class="topButton">
<a href="" id="linktomouseover">+</a>
</span>
<span id="container4" class="bottomButton">
<a href="" id="linktomouseover2">-</a>
</span>
</span>
</span>
<span class="rightRapper">
<span id="buttonColumn">
<span id="container" class="topButton">
<a href="" id="linktomouseover3">+</a>
</span>
<span id="container2" class="bottomButton">
<a href="" id="linktomouseover4">-</a>
</span>
</span>
</span>
</div>
I'm trying to get the <span>
.leftRapper
and .rightRapper
to be side by side in the <div>
battleBox
. However, when I set the CSS display
property to inline
, the <span>s
get squished into a smaller shape for some reason. When I set the display
to block
, it turns them into the size I want but it doesn't display them the way I want, because they're not displayed inline.
What is causing the <span>s
to have a smaller size?
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
We can use the padding-left property in a <span> element to add spaces. For example, inside the HTML body, type the text of your desire. Where you want to add the blank space, create a <span> element and apply the style in it. Set the padding-left property to 30px .
Using float and margin The left div is styled with width:50% and float:left – this creates the green colored div that horizontally covers half of the screen. The right div is then set to margin-left:50% – this immediately places it to the right of the left div.
Add or replace the properties below in the following CSS classes/selectors:
#battleBox {
width: 216px; /* increasing width from 210 to 216 because your border takes 6 extra px*/
}
.rightRapper {
margin: 0px; /* remove all margins to fit two divs in the container */
display: inline-block; /* display block elements in one line */
}
.leftRapper {
margin: 0px;
display: inline-block;
}
Example
You could/should add a float: left
to .leftRapper
.
Other options are e.g. adding a negative right margin to .leftRapper
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With