Menu
Can someone please help me with this problem as i have been dealing with it for a long time now....
I am trying to get 3 divs on the same line next to each other one of the divs looks like this:
<div> <h2 align="center">San Andreas: Multiplayer</h2> <div align="center"> <font size="+1"> <em class="heading_description">15 pence per slot</em> </font> <img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; "> <a href="gfh" class="order-small"> <span>order</span></a> </div> and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left
883
Three or more different div can be put side-by-side using CSS. 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.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
Three or more different div can be put side-by-side using CSS in the same div. This can be achieved with flexbox – but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work. Use CSS property to set the height and width of div.
I'm surprised that nobody gave CSS table layout as a solution:
.Row { display: table; width: 100%; /*Optional*/ table-layout: fixed; /*Optional*/ border-spacing: 10px; /*Optional*/ } .Column { display: table-cell; background-color: red; /*Optional*/ }<div class="Row"> <div class="Column">C1</div> <div class="Column">C2</div> <div class="Column">C3</div> </div>Works in IE8+
Check out a JSFiddle Demo
134
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
