Sometimes the sidebar (with float: left) doesn't stay on the left side

I created a container to hold sidebars and content, but I noticed that when I have more text in the sidebar compared to the container, the second sidebar floats slightly to the side. Here is the code I am using:

HTML:

<div class="container">
    <div class="sidebar">
        Placeholder
        <br><hr>
        Test
    </div>
    <div class="content">Placeholder</div>
    <br>
    <div class="sidebar">Placeholder</div>
</div>

CSS

.sidebar {
  width: 222px;
  height: auto;
  background-color: #E9E9E9;
  border-radius: 5px;
  border: 1px solid #7F7F7F;
  box-shadow: inset 0px 1px 0px #FDFDFD;
  box-shadow: 0px 1px 0px #949494;
  margin-right: 20px;
  padding: 5px;
  float: left;
  text-align: left;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}
.content {
  width: 666px;
  height: auto;
  background-color: #E9E9E9;
  border-radius: 5px;
  border: 1px solid #7F7F7F;
  box-shadow: inset 0px 1px 0px #FDFDFD;
  box-shadow: 0px 1px 0px #949494;
  padding: 5px;
  float: right;
  text-align: left;
  display: inline-block;
  margin: auto;
  margin-top: 10px;
}
.container {
  width: 932px;
  text-align: center;
  margin: auto;
}
htmlcss

Answer №1

To avoid conflicts, ensure that each sidebar has a unique class. Add a .clear {clear:both} to your css file and include it just before the closing div of each sidebar. If you require two sidebars, establish separate rules for sidebar1 and sidebar2 with different floats. Consider changing inline-block to block for improved formatting.

Answer №2

If I grasp the question: HTML

   <div class="container">
        <div class="sidebar">
            Placeholder
            <br><hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac est eu ligula efficitur mollis. Aliquam erat volutpat. Vestibulum auctor lacus in nibh suscipit commodo. Mauris id tortor urna.</p>  
        </div>
        <div class="content">Placeholder</div>
        <br>
        <div class="content">Suspendisse potenti. In non lectus condimentum, varius neque at, tristique risus. Proin pellentesque neque vitae libero vehicula, eget dignissim purus vestibulum.</div>
    </div>

CSS

.sidebar {
width: 222px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
margin-right: 20px;
padding: 5px;
float: left;
text-align: left;
font-weight: bold;
display: inline-block;
margin-top: 10px;
}
.content {
width: 666px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
padding: 5px;
float: right;
text-align: left;
display: inline-block;
margin: auto;
margin-top: 10px;
}
.container {
width: 932px;
text-align: center;
margin: auto;
}

DEMO

Answer №3

Revamp the appearance of .sidebar

.sidebar {
    background-color: #E9E9E9;
    border: 1px solid #7F7F7F;
    border-radius: 5px;
    box-shadow: 0 1px 0 #949494;
    font-weight: bold;
    height: auto;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
    padding: 5px;
    text-align: left;
    width: 222px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

Can anyone recommend any drag-and-drop jQuery plugins that offer similar functionality to Gmail's attachment dragging and dropping feature? I would like the ability to track the upload progress. However, I am specifically looking for options without ...

jquerycsshtmldrag-and-drop

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

javascriptjqueryhtmlajaxwordpress

Is there a way to center text that is aligned to the left within a div?

Is there a way to center text that is left aligned? I'm struggling to achieve the following effect: This text is left aligned. This text is left al ...

htmlcsstext-alignment

Choosing the div elements that have a PNG background image assigned to them

Is there a way to use jQuery to target all the div elements with a background-image property set to url(somepath/somename.png) in their style? ...

jqueryhtmlpngjquery-selectors

Activate the div when hovering over the span

Experiencing an issue with triggering a visible div while hovering over a span. Here is the code structure: <ul class="products"> <li> <a href="somelink"> <img src="some image"> <div class="overlay"> Some Text</div> & ...

javascriptcsswordpress

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

Closed. This question is opinion-based. It is not currently accepting answers. Lo ...

javascripthtmliframe

CSS class is functioning properly in conjunction with the textarea element, but it is not properly

I have a CSS class called ".form_bg_color" with the following definition: .form_bg_color{ background: red; } When I apply this class to my text field in the view like so: <%= f.text_field :source, class: "form_bg_color" %> The color of the input ...

htmlcssruby-on-railsruby-on-rails-4

What could be causing the black spaces to appear after my text in HTML?

I recently tried to implement text on an image following a tutorial I found at https://css-tricks.com/text-blocks-over-image/. Here is the code snippet I used: .image{ position: relative; } h2{ position:absolute; top: 200px; left: 200px; wi ...

jqueryhtmlcssdebugging

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

Searching for a jQuery plugin to convert an image to black and white? Look no further! I've explored various options, but none quite fit the bill. What I'm really after is an effect that will revert the image back to color when a specific element ...

jquerycssimage

Activate all inactive input and selection elements

I need a solution to enable all disabled input and select elements before submitting the form in order to retrieve the values of those disabled elements. Here is what I have tried: function enable() { $('input[type="text"], input[type="chec ...

jqueryhtmlperformance

Tips for incorporating extensive amounts of HTML into Internet Explorer without causing excessive strain on the CPU

I have been exploring a more ajax-based approach to loading data on a page in order to avoid postbacks. I can easily retrieve server-generated HTML through an ajax call, and adding it to the DOM is straightforward with jQuery's .append or .replaceWith ...

jqueryhtmlajaxinternet-explorerdom

Retrieve a specific choice from a radio button and store it in a MySQL database

I need assistance with extracting the value from a selected radio button and inserting it into MySQL database. Although I have tried using isset(), I am facing issues when trying to retrieve the chosen radio button. Could someone please lend a hand? < ...

phphtmlmysqlforms

Design a background or overlay for modal using CSS styling

How do I add a backdrop color behind my React modal screen using just CSS, specifically positioning the overlay with white at .5 opacity behind the modal? .modal-footer-small width: 450px height: auto margin: 0 auto top: 53% left: 0 right: 0 ...

cssreactjsmodal-dialogoverlay

Identify certain lines from the paragraph text

Suppose you have an HTML Paragraph Element (e.g., <p>) with certain text sections highlighted using a HTML Mark Element (e.g., <mark>). I am interested in adding a vertical line in the margin or gutter (uncertain about the appropriate term) tha ...

htmlcss

Conceal the title text within the collapsed sidebar in AdminLTE

When using the AdminLTE theme, I noticed that when I collapse the sidebar, the menu title gets hidden under the pull-right-container icon. See the image below for a better understanding. View Error Image Is there a way to display it on a new line? Below ...

htmlcsssidebaradminlte

How can you override the selected classes for menu items in Material-UI using React.js?

Hey there! I'm facing an issue where I can't override the class that displays the correct styling when a menuItem is selected. Below is my code: <MenuItem component={Link} to="/Acceuil" className={{root:classes.menuItem ,selected:cla ...

cssreactjsmaterial-uimenuitemstyling

Run the function after the onclick function has finished executing

I'm currently working on diagnosing an issue with this application. There is an anchor tag that contains the following code: onclick="javascript: return ShowItemDiscussion();" This code is located in a separate JavaScript file. I am attempting to ...

jqueryhtml

Is it possible to convert (HTML and CSS3 generated content for paged media) into a PDF format?

Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...

htmlcssxhtmlpdf-generationcss-paged-media

Using Input.checked will generate a dynamic element that must be connected to an input field

I am currently facing an issue with a filter that dynamically creates li elements when an input is checked. The problem is that I cannot figure out how to clear the input when you click on the element. I am interested in finding a way to bind the input and ...

javascripthtml

CSS - Utilize floating divs to dynamically populate empty spaces

I am currently working on creating a grid layout on my website, . Despite using multiple divs (images) with the float: left; property, I am noticing empty spaces and gaps that are not being filled by the floating divs. Thank you in advance for any assist ...

csscss-floathtmljquery-isotope