Incorporating float and clear techniques with the <aside> HTML element

Attempting to position two elements to the left and right of another element using floats, but encountering unexpected results. Check out the jsfiddle link provided below...

https://jsfiddle.net/vx7tjbkf/

aside {
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: aqua;
}

#leftaside {float: left;}
#rightaside {float: right;}

article {float: left;
    margin: 0;
    padding: 0;
    width: 50%;
    background-color: lightgreen;

}

Answer №1

Your CSS file includes a clear property for the aside element

    section,
    aside,
    article,
    footer {
        clear: both;
    }

To fix the issue, remove the clear property or use a more specific selector to set it to none;. You can view an example here


For more information on the CSS clear property, refer to this link
"No floating elements allowed on the left or the right side of a specified element"

Answer №2

Instead of messing with floats, consider using display:flex in this scenario

One approach is to enclose your leftaside, article, and rightaside in a div and apply display:flex to it

Check out this code snippet for an example:

header {
  width: 100%;
}

nav {
  width: 100%;
}

aside {
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: aqua;
}

.content {
  display: flex;
  justify-content: space-between;
}

article {
  float: left;
  margin: 0;
  padding: 0;
  width: 50%;
  background-color: lightgreen;
}

footer ul {
  width: 30%;
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: top;
  list-style: none;
}


/* Professor's nav styling...no need to edit
**************************************** 
*/

nav.sitenav ul {
  list-style: none;
}

nav.sitenav li {
  display: inline-block;
  width: 8em;
  text-align: center;
}

nav.sitenav a {
  display: block;
  font-weight: bold;
}

nav.sitenav a:link,
nav.sitenav a:visited,
nav.sitenav a:hover,
nav.sitenav a:active {
  color: green;
  text-decoration: none;
  border-bottom: thin solid transparent;
}

nav.sitenav a:hover {
  border-bottom: thin solid green;
}

nav.sitenav li.youarehere a {
  background-color: #cdfecd;
  border-bottom: thin solid green;
}

section,
aside,
article,
footer {
  clear: both;
}

footer {
  border-top: thin solid green;
}
<header>
  <h1>Vegetables</h1>
</header>
<nav class="sitenav">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="youarehere"><a href="#">Grow</a></li>
    <li><a href="#">Buy</a></li>
    <li><a href="#">Cook</a></li>
    <li><a href="#">Eat</a></li>
  </ul>
</nav>
<div class="content">
  <aside id="leftaside">
    <h3>What's New</h3>
    <ul>
      <li>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage.</li>
      <li>catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</li>
      <li>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</li>
      <li>Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts.</li>
      <li>Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato.</li>
    </ul>
  </aside>
  <article>
    <h2>Growing Herbs Indoors</h2>
    <section>
      <h3>Basil</h3>
      <p><img alt="basil" src="images/basil-250.jpg" style="float: right;" />Chaya tepary bean elephant garlic swede sweet pepper tomato horseradish water chestnut drumstick good king henry mung bean. Bell pepper ahipa azuki bean bitter melon garden rocket
        chickpea, canna, swede. Tepary bean mung bean yacón, carrot catsear. Carrot ricebean avocado brussels sprout watercress lagos bologi bamboo shoot, garbanzo epazote. Lima Bean kohlrabi burdock - ahipa. Epazote camas bok choy - celtuce corn salad
        fiddlehead fat hen. Sorrel cardoon broccoli rabe chicory.</p>

      <p>Moth bean beetroot kai-lan. Guar summer purslane courgette elephant garlic chinese mallow turnip greens fluted pumpkin horse gram. Bitter melon celery, sea kale lima bean broadleaf arrowhead, taro. Common bean bitter gourd cassava good king henry
        chaya rutabaga good king henry, kurrat canna - yardlong bean kale. Ceylon spinach; fava bean pigeon pea potato squash, canna mung bean!
      </p>
    </section>
    <section>
      <h3>Mint</h3>
      <p><img alt="mint" src="images/mint-250.jpg" style="float: right;" />Spinach bell pepper gobo lotus root, ginger lima bean arracacha. Kohlrabi - good king henry, ricebean leek brussels sprout, pigeon pea; broadleaf arrowhead; spinach. Moth bean land
        cress; hamburg parsley mizuna greens swiss chard earthnut pea leek, west indian gherkin new zealand spinach taro turnip garden rocket! Ulluco jerusalem artichoke spring onion brinjal dandelion sea kale. Lotus root broadleaf arrowhead ulluco orache.
        Dolichos bean soko, leek okra mooli radish avocado sweet potato or kumara skirret.
      </p>
      <p>Beet greens aubergine garden rocket mustard. Green bean celtuce jerusalem artichoke fiddlehead bell pepper tatsoi soybean yacón sweet potato or kumara zucchini. Hamburg parsley mung bean onion polk. Kuka, lima bean kohlrabi moth bean ricebean leek
        moth bean scorzonera. Plectranthus, lettuce avocado pak choy.
      </p>
    </section>
  </article>
  <aside id="rightaside">
    <h3>Resources</h3>
    <ul>
      <li>Azuki bean, welsh onion garlic cucumber. Orache brinjal fava bean lagos bologi good king henry.</li>
      <li>Scorzonera mizuna greens courgette; winged bean shallot bamboo shoot</li>
      <li>Green bean ceylon spinach lamb's lettuce. Yarrow garbanzo spinach.</li>
      <li>Mizuna greens tepary bean leaves. Common bean; plectranthus bitter melon camas bok choy drumstick lizard's tail new zealand spinach.</li>
      <li>Indian pea, tepary bean beetroot golden samphire.</li>
      <li>Ti manioc peanut turnip. </li>
      <li>Gobo hamburg parsley earthnut pea garbanzo sea beet.</li>
      <li>Cucumber lizard's tail chinese mallow. </li>
      <li>Turnip dandelion horseradish collard greens ahipa collard greens jícama bitterleaf spring onion.</li>
    </ul>
  </aside>
</div>

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

Are there occasional issues with the proper functionality of Bootstrap modals?

I have encountered an issue with a modal I created for my website using Bootstrap v3.3.2. Occasionally, when triggered, the modal appears but the contents within it do not display properly. It seems to be empty, showing only the background of the modal. ...

Interactivity with SVG clip-path featuring multiple paths through hover events

I have a unique SVG demo image with multiple circles that are clipping an animated GIF. Can we detect hover events for each individual circle as the user mouses over them? For example, the top-left or middle-right circle? Is it also possible to change th ...

4 innovative ways to customize internal CSS in Bootstrap

I'm just starting out with bootstrap and I could really use some guidance on how to customize it. I managed to create a sample site, but I'm struggling to make modifications beyond the basic bootstrap settings. I have a "container" with blue font ...

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# https://i.sstatic.net/85uTq.png However, when implementing the same in my project, I encountered: h ...

Verify the accuracy of the color value on a web page using Selenium in Java

As a beginner in using Selenium with Java, I encountered an issue related to a symbol in my connected class turning green. I needed to assert whether the symbol actually changed its color. Below is the code snippet that I used: Boolean connectionSymbolG ...

Is there a way to dynamically insert an element into an Angular view at runtime?

Below is the input field declaration: public inputField = '<input class="form-control autofocus tertiary-bg-color answerField" type="text" required ' + ' [(ngModel)]="userAnswer" #userAnswerVar="ngMod ...

Is it possible in PHP to iterate through a query and sort it into a designated column according to a specific value?

I'm working with Laravel and trying to display data from a query in an HTML table. The table contains columns such as id, user, and shift. There are around 100 entries, with the shift column containing values like A, B, C, or D. My goal is to organize ...

What could be causing the input submit in my form to be unresponsive when clicked?

I'm stumped on what's causing the issue. My sign-up form seems to be malfunctioning - when I click the "Complete Registration" button, nothing happens! The form doesn't even submit. Here is the HTML structure: <!DOCTYPE html> <html ...

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

Arrangement of cards in a column

As someone who is new to working with CSS, Wordpress, and similar technologies, I am seeking assistance. I am struggling with creating card layouts. My goal is to achieve a layout similar to this, where the cards are displayed in two columns instead of ju ...

Switch the style sheets after the content

How can I create a toggle effect on the :after property, switching between + and - each time the link is clicked? I've attempted to achieve this using JavaScript, CSS, and HTML, but the code only changes + to - and doesn't switch back when the l ...

Spin the div in the opposite direction after being clicked for the second time

After successfully using CSS and Javascript to rotate a div by 45 degrees upon clicking, I encountered an issue when trying to rotate it back to 0 degrees with a second click. Despite my searches for a solution, the div remains unresponsive. Any suggestion ...

Understanding the reasoning behind the back button

I am currently working on a project that requires implementing a back button functionality. Unfortunately, I am facing some challenges with it. While I have successfully created a back button that works, the issue arises when the user wants to edit the pre ...

Issue with positioning in IE11 when using `top:0` and `bottom:0` inside a table

Expanding on a previous inquiry of mine, I have created this interactive demo The demo features two columns on top of one column in smaller views, and 3 columns in a row in larger views. While the layout functions as intended, I noticed a lack of spacing ...

The textbox is unable to receive input from the pop-up window

Whenever I click on a text-box, a popup window opens up. However, the value is not inserted in the text-box when I select any radio option in the popup. Can you identify where the problem lies? Here's the text-box: <tr><td> Work </td& ...

Access the content of each cell in a table using JavaScript

I need help with a scenario involving a table that has 4 rows, where the 4th row contains a textbox. When the "onchange" event of the textbox is activated, I want to retrieve the data from the cells in that specific row and transfer it to another table. It ...

Is there a way to adjust the footer to move downward automatically as new content is added to the body?

Hello friends! I encountered an issue with my website where the content in the body overlaps the footer when there is a lot of content added. I have created a navigation bar and footer separately on different pages and then included them on every page usin ...

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

On my website, users can upload images, names, and descriptions which are saved in a MySQL database. The information is then fetched to display on the website. The code below allows users to enter this information and see it displayed when they click the s ...

An alternative method for storing data in HTML that is more effective than using hidden fields

I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...

"Learn the process of connecting an HTML5 element to Angular 2 source code while in a saving mode

In this Angular2 implementation, I have created some HTML code for user access. However, I am facing an issue where the data is not binding at the Angular2 source code side. HTML Code <form class="form-horizontal" novalidate [formGroup]="EmployeeForm" ...