CODEWITHSUNDEEP
cssreactjs
Chen
Chen

Reputation: 291

How can i position this item so that it is attached to the left?

enter image description here

I want one of my div to be positioned more to the left but I can't find a way to position it that way. Because the three columns are inside a flex and when I change one thing, everything changes. If I just change the class for the div that contains these items, nothing changes.

The code:

import React from 'react'
import './tweetpage.css'
import Navbar from './navbar.js'

function Tweetpage() {
    return (
        <div className="tweetpage_____div">
          <Navbar />
          <div className="tweetpage____tweetit">
            <h1>Home</h1>
            <input placeholder="What's happening?" />
            <button>Tweet</button>
          </div>
          <div>
            <input placeholder="search" />
          </div>
        </div>
    )
}

export default Tweetpage

The CSS:

.tweetpage_____div {
  display: flex;
}

.tweetpage_____leftsection {
  display: flex;
  flex-direction: column;
}

.twitterlogo____tweetpage {
  width: 28px;
}

.tweetpage_____div > div {
  margin-left: 250px;
}

.tweetpage_____div > div {
  margin-left: 250px;
}

.tweetpage____tweetit {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


.tweetpage_____div {
  display: flex;
}

.tweetpage_____leftsection {
  display: flex;
  flex-direction: column;
}

.twitterlogo____tweetpage {
  width: 28px;
}

.tweetpage_____div>div {
  margin-left: 250px;
}

.tweetpage_____div>div {
  margin-left: 250px;
}

.tweetpage____tweetit {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
<div class="tweetpage_____div">
  <nav>Navbar</nav>
  <div class="tweetpage____tweetit">
    <h1>Home</h1>
    <input placeholder="What's happening?" />
    <button>Tweet</button>
  </div>
  <div>
    <input placeholder="search" />
  </div>
</div>

Upvotes: 1

Views: 49

Answers (1)

davidleininger
davidleininger

Reputation: 949

I believe the issue is with this code:

.tweetpage_____div > div {
  margin-left: 250px;
}

.tweetpage_____div > div {
  margin-left: 250px;
}

This is saying any div that is a direct child of .tweetpage_____div gets a margin-left: 250px;. This means the center content and the search are both getting that large margin.

If you're looking for three columns and the center one fills all available space, you would basically want to build this:

.tweetpage_____div {
  display: flex;
}
.tweetpage_____leftsection {
  display: flex;
  flex-direction: column;
  flex-basis:250px; /* I'm assuming that's the width you're using */
  flex-shrink: 0; /* This means the item won't shink below 250px */
}
.tweetpage____tweetit {
  flex: 1; /* this will grow to fit the available space */
  padding: 0 24px; /* what ever gutter size you want here */
}
.tweetpage____search {
  flex-basis:250px; /* I'm assuming that's the width you're using */
  flex-shrink: 0;
}

This would give you three columns the first and third are 250px wide and the other will take up as much space as possible. You could set a max-width on that one and then give it a margin: 0 auto; to center it between the two if needed.

Upvotes: 1

Related Questions