BASIC Problem - am i blind?

BASIC Problem - am i blind?
0

#1

I’m just trying to make a basic 2 column responsive template for practice but for some reason which is likely very obvious I cannot create two columns within my main container.

I have an overall content container class and within that I have placed 2 div classes of column 1 and column 2.

Can anyone see why my example paragraphs are remaining on top of eachother rather than taking up the 45% each of the parent .container that I set?

Thanks for your help on a dumb but frustrating question…

HTML

	<div class="col-1">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
		</div>
	<div class="col-2">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
	</div>	

		<footer></footer>
</div>

CSS PAGE
/GENERAL SETTINGS/

body {
background: yellow;
}
.container {
width: 800px;
margin: auto;
background: blue;
}
.head {
background: pink;

}
.col1 {
max-width: 45%;
padding: 2.5%;
background: red;
display: inline-block;
}
.col2 {
max-width: 45%;
padding: 2.5%;
background: green;
display: inline-block;
}


#2

This is the code above the html which for some reason didnt show in my post!!! Had to remove the angle brackets for it to post!!!

body
header /header
div class=“container”


#4

I hate to say it but yes - I just saw the mismatch on the class name. duhhhh! Thanks.

Could i put display: inline-block to get them on same line?
but then I guess i still need to float left and right to make the columns symetrical.

thanks for a speedy reply!!!

Trying to nail down the layout basics - not sure why I’m finding it so frustrating!!!


#6

thanks I will.
I’ve been going through so much documentation but it’s slowly sinking in. Fine with most stuff but the layout is frustrating but pretty fundamental. I want to be able to write my own templates rather than relying on other people. Far too easy to get results but not really understand what I’ve just done!
Thanks again :slight_smile:


#7

I’ve Got it! Something clicked so Thanks :slight_smile: