Question 175045 in Html Question posted in
Some basic documentation can be found here.

What can we do to improve our environment?

I have a banner a follows:

enter image description here

I need to display Title on left most side and icon on the right most side.

Here is my code:

<div className={classNames.root} role="banner">
  <div className={classNames.left}> Title </div>
  <div className={classNames.right}><SettingsIcon /></div>
</div>

root: [
      {
        backgroundColor: theme.palette.themePrimary,
        height: 40,
        color: 'white',
        maxWidth: "100%",
        margin: '0 auto',
        borderBottom: '1px solid transparent',
        boxSizing: 'border-box',
        display: 'flex',
        paddingLeft: 20,
        paddingTop: 10
      },
      className
    ],
    left: {
      float: 'left'
    },
    right: {
      fontSize: 20,
      float: 'right'
    }

How do I fix this?

Tags:

3

Answers


  1. 0

    You mixed 2 approaches for element placement: flex and floating.

    The example with floating:

    .root {
  background-color: darkblue;
  color: white;
  height: 40px;
  padding: 10px;
  width: 100%;
}

.left {
  float: left;
}

.right {
  float: right;
}
    <div class="root" role="banner">
  <div class="left"> Title </div>
  <div class="right">Settings</div>
</div>

    The example with flexbox:

    .root {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: darkblue;
  color: white;
  height: 40px;
  padding: 10px;
  width: 100%;
}
    <div class="root" role="banner">
  <div class="left"> Title </div>
  <div class="right">Settings</div>
</div>
    Login or Signup to reply.
  2. 0

    I can make a suggestion like this; This way, by using justifyContent: ‘space-between’, the items inside will be evenly distributed horizontally between the left and right sides. And with alignItems: ‘center’, the items will be vertically aligned at the center.

    Login or Signup to reply.
  3. 0

    If you’re using flex box then set the flex-grow of your left most div to 1. It’ll push the icon all the way to the right. Flex items automatically shrink to the size of their content unless you tell them otherwise.

    CSS tricks has a good article on flexbox and here’s a video by Scrimba on flex-grow and flex-shrink

    Marked up code below:

    .root {
  background-color: #0078d4;
  height: 40px;
  color: white;
  margin: 0 auto;
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  padding-left: 20px;
  padding-top: 10px;
}

.left {
  flex-grow: 1; /* make the left div grow by setting this to a value greater than zero so it pushes the right div to the right */
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class='root' role="banner">
  <div class='left'>Title </div>
  <div class='right'><i class="fa-solid fa-circle-info"></i></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search