Cant understand positioning in CSS


#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: