Problem with floats in notepad++ what am i doing wrong?

html-css

#1

My text on right goes down no matter of what.

<!doctype html>
<html lang="en">
<head>
<title>Some title</title>
<meta http-equiv="content-type" type="text/css">
<meta name="viewport" content="width:device-width, initial-scale=1.0">
<meta name="description" content="Some description">
<meta name="author" content="Ismar">
<meta name="generator" content="notepad++">
<meta nema="keywords" content="HTML, CSS, JavaScript, PHP">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="New2.css">
</head>
<body>
<div class="container-fluid">
<h1 class="text-center">Hello world</h1>

<div id="box1">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>
 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <br>
 Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

<div id="box2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>
 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <br>
 Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="box3">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>
 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <br>
 Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</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>
</div>
</body>
</html>

Thats my code and here’s my CSS:

table th {text-align:center; background-color: green; }
table td {border: solid 1px; padding: 4px 5px 4px 5px;}
	p {text-align: center;}
	#box1 {width: 300px; height: 300px; float: left;}
	#box2 {width: 300px; height: 300px; margin:0 auto;}
	#box3 {width: 300px; height: 300px; float: right;}

Text on right always goes down on right no matter of what, what did i do wrong?


#2

So this is what I quickly put together. Is this what you want?

If yes, here’s how I did it:

  1. removed float entirely.
  2. gave each box a relative position
  3. gave each box a display of inline-flex
  4. wrapped the three boxes in a div that i ID’d #container
  5. gave #container a fixed width of 910px
  6. aligned #container centrally

I’m obviously not giving you the code as I think this is already more than enough to pull it off.

Feel free to ask should you have troubles setting this up.


#3

Ok i got what you did, i have been watching many videos and read alot about this in many sites and positioning random parts of website is a pain in the ■■■ from what i noticed. How do i put first box of text to left, 2nd box to center and 3rd box to right without it falling down if i use float right? Or is there any other way to position them that way so boxes get separated?


#4

So, I just gave each text box a left margin and I increased the width of the container.
Increase margin and width accordingly as per your needs.

It’s not elegant, but with some more work put into it you could get something out of it.


#6

I did what you said but cant seem to make it work. How do i exactly center it? Please help me, im stuck.


#7
.container-fluid {
    width: 95%;
    margin: auto;
    text-align: center;
    position: relative;
}
.container-fluid > div {
    width: 31%;
    float: left;
    margin: 0 1%;
}

https://repl.it/@mtf/basic-floats

Couple things to keep in mind:

  1. Simplicity: Use as little structure as possible and traverse the tree rather than giving everything an ID or class. The parent is the only member that gets a class for easy targeting.

  2. Use a new paragraph rather than <br> inside a paragraph.

  3. Scripts should be contained by only the body element, and not be inside your document structure.

  4. Use a single rule to describe similar objects. Notice that there is only one rule above to the describe the three boxes?

  5. Keep selectors simple and don’t add specificity where none is needed.

    table th  =>  th
    
    table td  =>  td