Can't understand positioning in CSS

Can't understand positioning in CSS
0.0 0

#1

Does anyone have any tips? Im trying to center three groups of text in one ie container, but cant understand how, its realy complicated.


#2

Can you share a link to your project, so we can better understand what you are currently trying to do? Also, be very specific about what you are expecting the page to look like vs. what you are seeing displayed. This helps us to understand your intent.


#3

Have you tried using Bootstrap Grid? If not, you could give flexbox a try.


#4

Here’s my HTML code:

<!doctype html>
<html>
<head>
    <title>Test Project</title>
    <meta http-equiv="content-type" type="text/html">
    <meta charset="UTF-8">
    <meta name="viewport" content="width:device-width, initial scale=1.0">
    <meta name="author" content="Ismar">
    <meta name="generator" content="Brackets">
    <meta name="description" content="Some description">
    <meta name="keywords" conent="HTML,CSS,JavaScript,PHP">
    <link rel="stylesheet" type="text/css" href="Test.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
<body>
    <h1 class="text-center">Test Project</h1>
    
    <div class="container">
        <div class="row">
    <div id="box1">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
    <img src="image1.jpg" href="image1.jpg" width="23%" height="48%">
    <div id="box2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
   <img src="image2.jpg" href="image2.jpg" width="23%" height="48%">
    <div id="box3">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
    </div>
    </div>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

Here’s my CSS:

.container {text-align: left;}
#box1 {background-color: aquamarine; float: right; height: 244px; width: 220px; padding-left:}
#box2 {background-color: antiquewhite; margin: auto; height: 244px; width: 220px;}
#box3 {background-color: burlywood; float: right; height: 244p; width: 220px;}

What am i doing wrong? I did try grid system, but i guess im quite stuck what ever i try.
This is how it looks like currently:


#5

I did use grid too, it was quite easy, but im trying to figure out positioning in different ways.


#6

You have not explained how you would like the boxes and images to display on the page. If you have a wire frame mock up you could show us, then that would be great.

Are you images supposed to be inside the boxes? If so, where should the images be positioned inside the boxes relative to the text content?


#7

I would like them to display all in straight line from left to right with a bit of space in between each of these boxes and images.


#8

No i want to be in in horizontal order, box with text, image, box with text, image and box with text, i dont want images inside of boxes. I just want them in horizontal order, but i cant seem to figure out how to line them.


#9

Im gonna do some training with flexbox, i forgot about the link you sent me previously so i bookmarked it now and will do it tomorrow. If i get any issues, i’ll post here on forum


#10

Without any further direction, you could use something like I have written below. I assume equal spacing for each column. I left the img attribute width=“23%” height=“48%” but all styling should be done CSS.

HTML div with class=“container”

  <div class="container">
    <div class="row">
      <div class="col" id="box1">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      </div>
      <div class="col">
        <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg" width="23%" height="48%">
      </div>
      <div class="col" id="box2">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      </div>
      <div class="col">
        <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/ogamingsc2-profile_image-9021dccf9399929e-300x300.jpeg" width="23%" height="48%">
      </div>
      <div class="col" id="box3">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      </div>
    </div>
  </div>

CSS

#box1 {background-color: aquamarine; }
#box2 {background-color: antiquewhite;}
#box3 {background-color: burlywood; }

#11

Oh yes, you’re the person I talked to earlier about floats. I forgot about that :expressionless:

The post I linked to is basically an overview, to get more practice, here are some interactive games you can try:



#12

I love that Flexbox Froggy game!


#13

Yeah! I’m trying out the zombie one right now. Looks alright so far!


#14

This might help:


#15

Try this: https://www.sitepoint.com/community/t/dcode-understanding-css-positioning/231154?utm_medium=email&utm_campaign=SitePoint%20Weekly%20Newsletter%20%20July%2028%202016&utm_content=SitePoint%20Weekly%20Newsletter%20%20July%2028%202016+Version+A+CID_a0c5903b61981ab8001d069822b0e949&utm_source=CampaignMonitor%20SitePoint&utm_term=welcome%20dCode


#16

I put your images in divs and added the class=“col” to all the appropriate divs. That will help Bootstrap figure what you’re asking it to do. Then I changed class=“row” to class=“row box-area” for better control in css (e.g. styling “.row” will style all rows, whereas “.box-area” will only style this row).
I also added a div class=“wrapper” around everything and lengthened the box2 text, you’ll see why in a second.

<div class="wrapper">
	<h1 class="text-center">Test Project</h1>
	<div class="container">
		<div class="row box-area">
			<div class="col" id="box1">
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
					Mauris placerat eleifend leo.</p>
			</div>
			<div class="col">
				<img src="image1.jpg" href="image1.jpg">
			</div>
			<div class="col" id="box2">
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
					Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
					Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			</div>
			<div class="col">
				<img src="image2.jpg" href="image2.jpg">
			</div>
			<div class="col" id="box3">
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
					Mauris placerat eleifend leo.</p>
			</div>
		</div>
	</div>
</div>

Okay, so I put different borders around each item. This really helps me understand css positioning when I’m working on something difficult (ie. fancy dropdown menus). Examine the spacing of the different divs and objects within them as the window frame changes size.

Note the difference between “.wrapper” and “.container”.

I put the text areas in p’s for more control, in particular with overflow-y. Having fixed height containers without overflow is going to throw a wrench into positioning. Experiment with this and look at what happens when you *-out the overflow styling. The choice is either fixed height with overflow OR set a flexible height (min-height: 244px) and go without overflow styling.

Next, look at the div “display: inline-block” styling. Swap this out for “float: left” to understand how that changes positioning, move change the window frame size to get the full effect.

Note how I’ve styled width and height of all divs at once, instead of repeating it for each #box.

Everything else I’ve added is gravy to make it look nice. Let me know, if I should explain anything else I’ve done.

* {
	border: 1px solid red;
}
.wrapper {
	border: 2px dotted red;
	height: 100%;
}
.container {
	border: 2px dotted purple;
}
.box-area {
	border: 2px solid orange;
	text-align: center;
}
.box-area > div {
	border: 1px solid blue;
	width: 220px;
	height: 244px;
	margin: 5px;
	padding: 5px;
	box-sizing: border-box;
	display: inline-block;
	overflow-y: hidden;
}
.box-area > div p {
	border: 1px solid yellow;
	text-align: left;
	height: 100%;
	overflow-y: hidden;
}
.box-area > div img {
	border: 1px solid green;
	margin: 0 auto;
	height: 100%;
}

#box1 {background-color: aquamarine;}
#box2 {background-color: antiquewhite;}
#box3 {background-color: burlywood;}```

I remove the borders only when I know I’m NOT going to make anymore styling changes to anything remotely related to css positioning, this includes text-align.

Adding temporary borders is my major LPT for css positioning. Positioning can be really difficult, hair-pulling even. I’ve easily spent more time properly structuring the positioning of a fancy dropdown menu than on the entire remaining sections of the site. It’s hard, but sloppy positioning looks sloppy.

Learning css positioning will help you better develop an understanding of spatial relationships and that’ll really help you when you get into positioning different objects across different z-index! :stuck_out_tongue: