Jump to content

.London Domains - £4
Photo

CSS problem - placing 3 divs next to each other

css

  • Please log in to reply
4 replies to this topic

#1 Marmets

Marmets
  • Member
  • Newbie
  • 3 posts

Posted 07 May 2017 - 18:49

Dear members

 

I'm having a problem. So I'm trying to place all 3 divs next to each other. I've tried floating, eveything but still no result. Maybe you can help me to find out what's wrong. Just saying - I've been learning HTML and CSS for 2 months now.

 

 

HTMLhttps://pastebin.com/gnN8zzXf

 

CSShttps://pastebin.com/VE5JFw3K

 

 

Waiting for your response

Marmets


  • 0

#2 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,673 posts

Posted 08 May 2017 - 14:22

Welcome to the forum!

 

I've put your code in to codepen and played with it a bit. https://codepen.io/M...shop/pen/XRVmbW

 

I've commented it so hopefully you can learn what I did.

 

First off, i removed any set widths you were using on images as this was causing you sections to all be stuck at those set widths, causing the containers to all spill all over the place.

 

I then wrapped a div around your three columns and used "Flex" to space them side by side.

 

You can learn more about flexbox here https://css-tricks.c...ide-to-flexbox/

 

If you read the comments on my codepen hopefully that'll five you a fair idea of what's going on. If i was you, I'd fork that pen and play around with it a bit to get a feel for it.


  • 2

#3 Marmets

Marmets
  • Member
  • Newbie
  • 3 posts

Posted 08 May 2017 - 17:54

Hello Mike

 

At first thank you for your reply. I took a look and tried to learn something new. But still, I have one question - <div id="category-1" class="category-box"> - what does the class stands for? There is already an ID for the div but why do we need the class?

 

So the basic problems - I didn't have wrap div and I overused margins. So they "blocked the code" and it couldn't fit next to each other. 

I'm glad you took your time to fix my code and help me with the problem. The flexbox link was pretty useful for me.

 

If I want to have little spacing between each columns, should I use width to get the spacing?

How can I make the text margin smaller inside the container?

 

Do you have any other tips and tricks for me - I'm waiting for tips and tricks.

 

Best of luck

Marmets


Edited by Marmets, 08 May 2017 - 18:13.

  • 0

#4 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,673 posts

Posted 08 May 2017 - 18:35

I used a class for your content boxes as i wanted to apply a certain style rule to all three boxes and the easiest way for you to see what was going on was to use a class.

 

In all honesty, if you're going to code, try not to use ID's, use classes instead. The benefits being that you can have multiple classes per object, and each class can be applied to multiple objects on a page. Makes reusable code much easier and stops hierarchy issues where ID's may cancel out class rules.

 

I've tidied and updated the pen a bit, that may help. https://codepen.io/M...shop/pen/XRVmbW


  • 1

#5 Marmets

Marmets
  • Member
  • Newbie
  • 3 posts

Posted 08 May 2017 - 20:04

Thank you for the great answer. I know a lot more now.


  • 0





Also tagged with one or more of these keywords: css

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users