Need advice on page layout using containers and div rows please

#1

I’m struggling a little to get my head in the right place when I’m setting out a page using div containers and rows.

My mental approach is to open a container, a div row then define the width of each row/colum, add content, close the div row and then the container (section done).

Then, for the next section to go UNDERNEATH, I repeat the process above and expect it to position below the first one, and so on (I’m sure I read something about document flow?).

I’m just doing some practice on this and would really appreciate it if you could comment on how I’m approaching this as my results are inconsistent.

Although my approach seems logical to me I would love to know if I have over simplified things, got it completely wrong or got it pretty spot on (more or less).

I’m really looking for advice on my mental approach to this so that I can be clear in my mind how to set out my code before I start writing and getting myself muddled.

Thanks in advance!

#2

Your thinking is good for most of the cases except when there is/are sidebars in the page. Then you have to keep sidebar out of your main flow.

I hope you get my point. If not then try making a responsive page with a sidebar for desktop only.

#3

@mubaidr, thank you for giving me your thoughts on this.

I’m still quite new to coding so if you dont mind can i check if i need a div=container for a row of colums and then close the div =container and open a new one for anything to go underneath?

Or, do i open it once, then use as many div=row as i need, defining column widths and content for each one?

I hope that ,makes sense to you? :sweat_smile:

#4

Yes, first one. Instead use rows inside rows to manage multiple columns.

#5

Thank you, i’ll give that some practice now and hopefully all will go well!