0

I'm trying to create two vertical sections for a web page I'm making (using netlify connected to my github repo) and I cannot seem to set up two vertical sections. I'd ideally like for the left-most pane to cover one-third of the screen while the right-hand pane covers two-thirds. Here's the code I have so far, but it seems to fail:

For the .js file:

import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Ayy Lmao</title>
        <link rel="icon" href="/MyLOGO.ico" />
      </Head>

      <main>
        <Header title="Under construction!" />
    
        //<p className="description">
          //For all business inquiries, please call 911
        //</p>
    
    <style>
    .indent-1 {float: left;}
    .indent-1 section {width: 30%; float: left;}
</style>

<section class="indent-1">
    <!-- Section 1 --> 
    <section>
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <!-- Section 2 -->
    <section>
        <div>Some content 2</div>
        <div>Some more 2</div>
    </section>
</section>  
    
      </main>
    
      

      <Footer />
    </div>
  )
}

For the CSS file:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  box-sizing: border-box;
}

main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-family: Menlo, Monaco, Lucida Console, Courier New, monospace;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

I'm not exactly sure what I'm doing wrong, but I would appreciate any help!

1
  • As always, don't use float for alignign purpose. float is for flaoting an element within a text-block. For aligning items next to each other you should use Flexbox or alternativly CSS-Grid. Note that declaratiosn within a <style>-tag have a higher specificity then CSS and as such overwrite CSS. Also it is invalid to place the <style> tag outside of the head-element as the scope-attribute has been deprecated since 5 years.
    – tacoshy
    Jun 21, 2022 at 21:31

1 Answer 1

0

If you are certain that the 2 <section> elements should always have a ⅓/⅔ split, I would recommend using the CSS Flexbox system.

Here is a simplified example:

body {
  display: flex;
  flex-direction: row;
}

section {
  height: 300px;
}

.section-1 {
  background-color: lightcoral;
  width: calc(100% /3);
}

.section-2 {
  background-color: lightblue;
  width: calc((100% /3) * 2);
}
<body>
  <section class="section-1"></section>
  <section class="section-2"></section>
</body>

Looking at your code, I would simply say its pretty complex for achieving a fairly simple behaviour. Always look for the most straight-forward solution.

For page layouts, I pretty much live and die by Flexbox, but I know others that feel the same way about the CSS Grid system.

Here is a good guide on the Flexbox system.

Also I would try and avoid reliance on libraries like bootstrap for these sorts of things, as pure CSS (learned well), can be a far more powerful tool.

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.