Why won't my Div elements stay in line? - html

Question

I've gone through the forum and seemed to have tried all the suggestions related to div layouts. I'm trying to get two rows of elements as follows:
Row 1 - Number > Image > Text.
Row 2 - (Blank Space to move second row right by the same amount of pixels as the above image) > Number > Image > Text.
This is my code that I've tried so far:
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow: scroll;
overflow-x: hidden;
}
h1 {
font-family: 'Londrina Sketch', cursive;
color: #c13e18;
font-size: 50px;
text-align: center;
margin: 0px 30px 0px 30px;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
h3 {
font-size: 20px;
margin: 30px 30px 0px 30px;
}
h4 {
text-align: center;
}
p {
font-size: 20px;
margin: 0px 30px 0px 30px;
}
.choose {}
.number {
display:inline-block;
float:left;
}
.choose-image {
display: inline-block;
float: left;
}
.choose-text {
display: inline-block;
vertical-align: top;
float: left;
}
.customise {}
.empty-left {
display: inline-block;
width: 300px;
overflow: hidden;
}
.customise-image {
display: inline-block;
}
.customise-text {
display: inline-block;
vertical-align: top;
}
<h1>FROM BEGINNING TO END</h1>
<hr>
<h2>How many? What size? How old? When and why? How much?
If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2>
<hr>
<!-- choose -->
<div class="choose">
<div class="number">
<h4>1</h4>
</div>
<div class="choose-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" />
</div>
<div class="choose-text">Choose text content goes here</div>
</div>​
<div class="customise">
<div class="empty-left"></div>
<div class="number">
<h4>2</h4>
</div>
<div class="customise-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" />
</div>
<div class="customise-text">Customise text content goes here</div>
</div>
Thanks!

Answer 1

u have a typo:
.number (
display: inline-block;
float: left;
}
change to:
.number {
display: inline-block;
float: left;
}
after it`s corrected it looks fine i think.
On your site, change this:
.customise {
float: left;
width: 100%;
}
.choose {
float: left;
width: 100%;
}
to that:
.customise {
float: left;
width: 50%;
}
.choose {
float: left;
width: 50%;
}

Answer 2

I'm not entirely sure what you're trying to achieve with your code. I'll let you into a little secret of mine ;)
I call it a split, which I can split into multiple columns and rows.
here's my CSS
.clearfix:after{clear:both;content:'';visibility:hidden;display:block;}
/*because floats have to be cleared. I use a simple clarify method
although this may cause problems in IE <8
*/
#media only screen and (min-width:600px){/*use this if you want the elements to only be in columns for desktop computers.*/
.split .splitOb{float:left;padding:1%;}
.splitOb.w1{width:8%;}
.splitOb.w2{width:18%;}
.splitOb.w3{width:28%;}
.splitOb.w4{width:38%;}
.splitOb.w5{width:48%;}
.splitOb.w6{width:58%;}
.splitOb.w7{width:68%;}
.splitOb.w8{width:78%;}
.splitOb.w9{width:88%;}
}
The to use this idea, just use this basic structure.
<div class="split clearfix">
<div class="splitOb w5">
this is on the left side
</div>
<div class="splitOb w5">
this is the right side
</div>
</div>
Bare in mind though that all splitOb or split objects must equal to 10. You can make different variations of this and even reverse the order of your rows.
little bit of maths to help :)
with the percentages, you want to equal 100%. As whatever the parent's width, a child element with width:100%; will equal 100% of the parent.
So lets say I use the above example, there are 2 .splitOb.w5 so that's 48% x 2 = 96% now there's padding on each side of 1%. 1% x 4 = 4%. 4% + 96% = 100%. It's the same with all the other widths.
Also, try not to use a pixel width on the body. I say this as there are so many different ratios out there, ranging from say 320px x 400px to 1440px x 900px and larger!!!
using a viewport with help you get the device's width
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
This will mean if you did this:
body,html{width:100%;margin:0px;padding:0px;}
Both the body and html will be 100% of the device's or browser's width.

Answer 3

Currently change add below style
.choose {
width: 50%; float: left;
}​
.customise {
width: 50%;
float: left;
}​
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
h1 {
font-family: 'Londrina Sketch', cursive;
color: #c13e18;
font-size: 50px;
text-align: center;
margin: 0px 30px 0px 30px;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
h3 {
font-size: 20px;
margin: 30px 30px 0px 30px;
}
h4 {
text-align: center;
}
p {
font-size: 20px;
margin: 0px 30px 0px 30px;
}
.choose {
width: 50%; float: left;
}​
.number (
display: inline-block;
float: left;
}
.choose-image {
display: inline-block;
float: left;
}
.choose-text {
display: inline-block;
vertical-align: top;
float: left;
}
.customise {
width: 50%;
float: left;
}​
.empty-left {
display: inline-block;
width: 300px;
overflow: hidden;
}
.customise-image {
display: inline-block;
}
.customise-text {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1>FROM BEGINNING TO END</h1>
<hr>
<h2>How many? What size? How old? When and why? How much?
If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2>
<hr>
<!-- choose -->
<div class="choose">
<div class="number"><h4>1</h4></div>
<div class="choose-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" /></div>
<div class="choose-text">Choose text content goes here</div>
</div>​
<div class="customise">
<div class="empty-left"></div>
<div class="number"><h4>2</h4></div>
<div class="customise-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" /></div>
<div class="customise-text">Customise text content goes here</div>
</div>
<!-- customise -->
</body>
</html>

Answer 4

Try display: table or just make a table, unless your'e concerned about semantics. I'm not sure what the space is for here's a DEMO
I made another version without that space it looks a lot better