Show three blocks side by side using CSS inline styling

Question

Show three blocks side by side using CSS inline styling

I'm trying to display three divs - #left_sidebar, #records_list, and #right_sidebar - inline on my webpage. Initially, I used display:inline-block, but the sidebars ended up at the bottom of the page. Then, I attempted using float, but it resulted in some unexpected behavior. Finally, I combined float and display properties as follows:

#left_sidebar {
    top: 0px;
    width: 142px;
    float: left;
}

#records_list {
    width: 530px;
    display: inline-block;
}

#right_sidebar {
    background-image: url('../images/enstein_banner.png');
    width: 174px;
    height: 231px;   
    float: right;
}

By mixing float and display settings, everything now displays correctly. Can someone confirm if this approach is correct or suggest an alternative method? Thank you!

P.S. Feel free to ask for more information if my question is unclear.

html css position

Answer 1

Answer №1

#left_sidebar {
  width: 10%;
  padding: 20px;
  background: red;
  float: left;
  margin-right: 1%;
  color: #fff;
}
#records_list {
  width: 50%;
  padding: 20px;
  background: red;
  float: left;
  margin-right: 1%;
  color: #fff;
}
#right_sidebar {
  background-image: url('../images/enstein_banner.png');
  width: 15%;
  padding: 20px;
  background: red;
  height: 231px;
  float: left;
  color: #fff;
}

<div class="wrapper">
  <div id="left_sidebar">left bar</div>
  <div id="records_list">center part</div>
  <div id="right_sidebar">right bar</div>
</div>

Feel free to verify this now

Answer 2

#left_sidebar {
  width: 10%;
  padding: 20px;
  background: red;
  float: left;
  margin-right: 1%;
  color: #fff;
}
#records_list {
  width: 50%;
  padding: 20px;
  background: red;
  float: left;
  margin-right: 1%;
  color: #fff;
}
#right_sidebar {
  background-image: url('../images/enstein_banner.png');
  width: 15%;
  padding: 20px;
  background: red;
  height: 231px;
  float: left;
  color: #fff;
}

<div class="wrapper">
  <div id="left_sidebar">left bar</div>
  <div id="records_list">center part</div>
  <div id="right_sidebar">right bar</div>
</div>

Feel free to verify this now

Answer 3

Answer №2

To ensure all three div elements have a fixed width, you should use a wrapping div with a fixed width as well.

Additionally, try using float:left instead of inline-block.

For more information and demonstration, refer to the following fiddle: https://jsfiddle.net/afelixj/racnob3f/

Answer 4

To ensure all three div elements have a fixed width, you should use a wrapping div with a fixed width as well.

Additionally, try using float:left instead of inline-block.

For more information and demonstration, refer to the following fiddle: https://jsfiddle.net/afelixj/racnob3f/

Answer 5

Answer №3

I understand that you may already be familiar with the concept of float, but I believe there is still room for further clarification. A detailed discussion on float, inline, and inline-block can be found here: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 6

I understand that you may already be familiar with the concept of float, but I believe there is still room for further clarification. A detailed discussion on float, inline, and inline-block can be found here: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 7

Answer №4

apply the float left property to all elements, causing them to line up horizontally one after the other. To create space between them, use margin.

To implement these changes:

#left_sidebar {
width: 142px;
float: left;
}

#records_list {
width: 530px;
float: left;
}

#right_sidebar {
background-image: url('../images/enstein_banner.png');
width: 174px;
height: 231px;   
float: left;
}

Answer 8

apply the float left property to all elements, causing them to line up horizontally one after the other. To create space between them, use margin.

To implement these changes:

#left_sidebar {
width: 142px;
float: left;
}

#records_list {
width: 530px;
float: left;
}

#right_sidebar {
background-image: url('../images/enstein_banner.png');
width: 174px;
height: 231px;   
float: left;
}

Show three blocks side by side using CSS inline styling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Switch the navbar background color from see-through to black

Adding text in front of an input field can be achieved by using the placeholder attribute

Learn the effective way to customize the primary button text color in Bootstrap 4 using SCSS styling

JavaScript date formatting without using jQuery

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

Arrangements of lines in website design for various screen resolutions

Attach an event listener to a particular textarea element

Email Markup: !mso conditional tactic

Can we dynamically adjust font size based on the width of a div using CSS?

How can I prevent the background image from overlapping the footer?

Attempting to resolve the Bootstrap issue, currently in search of a suitable solution

Update the style class of an <img> element using AJAX

Error Encountered in Laravel 5.2 FormBuilder.php

CSS pixel movement problem causing the page to shift a few pixels before returning to its original position

New to CSS: Applying a background image on top of a gradient without any transparency on the image

What is the reason behind Chrome removing an SVG image pattern while utilizing jQuery Draggable?

If the option is 'Gel', use an if statement to console log

Ensuring CSS styles are permanent and unchangeable

Switch up the placement of the boxes by moving them in different directions, such as

Looking to dynamically increase the ID of a specific DIV element using Jquery at regular time intervals?