Noob question

How do I make the page like cut it in half, something like two containers.


       [HEADER]

Content          | NEWS
                      

I want the content container to take more space than the news one.

Hi, andreigames9. Welcome to the forums.

There is nothing wrong with being a noob. We’ve all been there. However, you sound more like a client than a student of HTML/CSS. Therefore, it sounds to me like you need to hire a consultant to write your page for you.

Have you written any code so far to support your page? If so, read our posting guidelines and post it. If not, consider the first sentence in this post again.

You could take a beginner’s class in HTML and CSS. Page layout techniques are introduced in the first half of the class/book and build from there.

Your ability to describe your goal reflects an organized, coherent mind. I’m very optimistic about your personal chances of success no matter which route you take.

I’ve suggested some basic tutorials in your other thread, @andreigames9.

The general picture here would be to create two containers for Content and News (using <div>, <section> or whichever HTML tag is most appropriate) , and then use CSS to assign widths to one or both and position them.

As with all things HTML/CSS, there is more than one way to achieve this, but without knowing a lot more about the page, the actual content, etc., it’s not really possible to offer a “best” solution.

1 Like

It sounds like what you want is a “two column layout”.
There are various ways to achieve that with css, floats, inline-blocks, display table, flexbox and probably more.
Display table is probably a fairly solid, well supported solution. It works by making elements display like an html table, but still allows you to use more semantic elements for the content, instead of using actual tables.
The html mark up may look something like this:-

<header>Header</header>
<div class="wrapper">
    <main>Content</main>
   <div class="news">The News</div>
</div>

With the css:-

.wrapper {
    display: table;   /* table cells must have a table container*/
    width: 100%;
}
.wrapper > * {     /* select direct descendants of the table wrapper to be cells */
    display: table-cell;
}
.news {
    width: 12em;   /* set the width of the narrower column, leave the other fluid to fill remaining space */
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.