How to make multiple divs display in one line but still retain width?
You can use display:inline-block
.
This property allows a DOM element to have all the attributes of a block element, but keeping it inline. There's some drawbacks, but most of the time it's good enough. Why it's good and why it may not work for you.
EDIT: The only modern browser that has some problems with it is IE7. See Quirksmode.org
How To Have Multiple Divs On One Line With Even Spacing
I would suggest adding a new element inside each serviceBox, in this example the div
with class box
CSS:
#serviceBox
{
width:100%;
margin: 0 auto;
margin-top:75px;
height:250px;
border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
float:left;
width:25%;
}
.box{
height: 250px;
background-color: white;
border:1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
}
HTML
<div id="serviceBox">
<div class="serviceBox1">
<div class="box">
<h2> Heading 1</h2>
<p>Information</p>
</div>
</div>
<div class="serviceBox2">
<div class="box">
<h2>Heading 2</h2>
<p> Information</p>
</div>
</div>
<div class="serviceBox3">
<div class="box">
<h2>Heading 3</h2>
<p>Information</p>
</div>
</div>
<div class="serviceBox4">
<div class="box">
<h2>Heading 4</h2>
<p>Information</p>
</div>
</div>
</div>
This way the service boxes are nicely a quarter of the container and inside service box you can add the border and shading to the new box element
Make multiple variable-height divs inline, yet maintain a fixed width container
If you want to have them on one line horizontally, you can try to use display: inline-block
with white-space: nowrap
on a parent, so the blocks would be on one line: http://jsfiddle.net/kizu/efVjj/26/
Make multiple divs of equal height when they aren't always on the same line
You can use fix height and vertical align top as below
div div {
display:inline-block;
border:1px solid gray;
padding:5px;
margin:10px;
width:20%;
height:150px;
border-radius: 8px;
vertical-align:top;
};
Fiddle Demo
How do I keep two divs on the same line?
You can make two divs inline this way:
display:inline;
float:left;
Related Topics
How to Position Div Below Another Div
How to Disable the Border on Bootstrap 4 Cards
Css Auto Hide Elements After 5 Seconds
Make a Div Fill an Entire Table Cell
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
Css @Media Print Issues With Background-Color;
Angular 5 - Failed to Load Resource: the Server Responded With a Status of 404 (Not Found)
How to Force Browsers to Print Background Images in CSS
React - Component Full Screen (With Height 100%)
How to Change Paper Size in Headless Chrome - Print-To-Pdf
Creating Css3 Circles Connected by Lines
Fixed Position Div Inside Div Container
How to Create a Flexible Vertical Line in Between Two Divs
Vuejs Vue-Router Linking an External Website
Align Mat-Cards Content (Image, Text and Buttons)
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used