HELP: html/css box float

muddywater
Newbie

its me brian

⛺︎ My Room

HELP: html/css box float

« on: February 08, 2023 @978.72 »

I'm currently having trouble with boxes on my neocities site...

I want to put two things next to each other within a box, but when I use "float" the things move out of the box.

my code looks like this (things in box)

Code

<body>

 



 <div class="container"> <center> <p> top bar </p> </center> </div> 

 

 <div class="x">

 

 

 <img src="rammy1.jpeg"><img src="spin.gif">

 



 </div> 

 
[color=#ff4cc6][color=#000000] </body>

.container{
[/color][/color]
 border:1px solid black;

 background-color:red; 

}



 .x {

 margin: auto;

 width: 50%;

 border: 3px solid green;

 padding: 10px;

}





.top {

padding: 10px;

}



.bar { 

 float:left;

}

and like this (things outside box)

Code

 <body>
 
 
 <div class="container"> <center> <p> top bar </p> </center> </div> 
 
 <div class="x">
 
 <div class="bar">
 
 <img src="rammy1.jpeg"><img src="spin.gif">
 

 </div> 
 </div> 
 
 
 </body>

(css is the same)

any help? also i know this might look confusing im free to clarify lol


« Last Edit: February 08, 2023 @982.51 by muddywater »	Logged

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

...

Re: HELP: html/css box float

« Reply #1 on: February 09, 2023 @42.21 »

Errr its a little hard to tell what exactly your code is trying to do.. but it sounds like this would be (mostly) a solution for you.

Code

<html>
 <head>
  <style>
   .center {
    text-align: center;
   }
   
   .boxes {
    display: flex;
   }
   
   .boxes div {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <p class="center">top bar</p>
   <div class="boxes">
    <div>Box A</div>
    <div>Box B</div>
   </div>
   <img src="rammy1.jpeg"><img src="spin.gif">
  </div> 
 </body>
</html>

So here I have created 2 boxes that are side by side and are totally equal - you have your centred text above them, and your two images below them.

I converted your <center> tags into CSS becouse thats just a good idea! BUT the important thing you need to look at is the display: flex; thats the thing making your box goes next to each other - then the .boxes div is styling the boxes and giving them a set size!

Not sure if thats exactly what your asking for - but its gotta be a good start


« Last Edit: February 09, 2023 @44.44 by Melooon »	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

RodFireProductions
Jr. Member ⚓︎

🍄🖤🐀

⛺︎ My Room
StatusCafe: rodfire8181
iMood:

Itch.io: My Games

Re: HELP: html/css box float

« Reply #2 on: February 09, 2023 @624.50 »

Another way to handle this that gives you a bit more control than flex is by using grids. Also I remember trying to use float when I was just starting out and it was horrible. I don't use it anymore.

Code

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* You can alter these sizes all you'd like */
  grid-template-rows: 1fr; /* or auto */
}

Code

<div class="container">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

I hope this helps.


	Logged

— we art, web dev, and game dev —

muddywater
Newbie

its me brian

⛺︎ My Room

Re: HELP: html/css box float

« Reply #3 on: February 10, 2023 @751.00 »

TYSMMMM!!! this helped


	Logged

Pages: [1]

« previous next »

Vaguely similar topics! (3)