Arranging items in CSS and showing them stacked on top of each other

How can I rearrange the order of id3 to be displayed below id2 instead of on the side using CSS?

Here is an example of the HTML and CSS:

HTML

<div class="main" ></div>
<div id="id1">Im in div1</div>
<div id="id2">Im in div2</div>
<div id="id3">Im in div3</div>
<div></div>

CSS

#id1{
    background-color:green;
    width:30%;  
    height:200px;
    border:100px;   
    float:left;
}

#id2{
    background-color:red;
    width:20%;  
    height:100px;
    border:100px;   
    float:left;
}

#id3{
    background-color:yellow;
    width:10%;  
    height:300px;
    border:100px;   
    float:left;
}

http://jsfiddle.net/w9xPP/

Answer №1

If you're looking for a better alternative to using floats, consider exploring masonry.js instead. It's a great solution for creating layouts that fit together like puzzle pieces without relying on floats just for horizontal alignment. Check out masonry.js for more information.

Answer №2

To ensure proper layout, apply the style rule clear: left; to the element with the ID of #id3:

#id3 {
  clear: left;
  background-color: red;
  width: 20%;
  height: 100px;
  border: 1px solid black;
  float: left;
}

When using the float property, elements will try to display next to each other instead of below. The clear property is used to remove this behavior and make sure elements are displayed correctly.

Check out this example on JSFiddle

Answer №3

If you're looking to create columns, consider @Diodeus's suggestion regarding ULs and LIs. It might be a good idea to revise your code for better organization. Alternatively, you can use a div to wrap your elements and float them to achieve a two-column layout instead of floating the individual items. Your child elements would then fit within these floated columns. Additionally, exploring grid systems like 960 Grid or Twitter Bootstrap could also be helpful.

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

Unable to render HTML in Simple Product Name on Magento platform

Is there a way to include HTML in my basic product titles, such as: <strong>A.</strong> Product Title Name However, the frontend displays these HTML tags. Is there a method to enable parsing of all HTML tags? ...

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

Is there a way to adjust the color of the checkbox?

After creating a show/hide toggle checkbox for a password input, I ran into an issue with changing the background color when it is checked. Our current code base includes a custom styled checkbox, but it lacks the ng-model needed for this particular featur ...

Issue with sticky navigation bar causing page content to shift

Any ideas on how to solve my issue with a sticky nav bar in Twitter Bootstrap? Whenever I scroll past a certain point, the navbar sticks but causes my content to jump. I want the content to stay in place without jumping. Here is my HTML code: <body> ...

The appearance of CSS can vary depending on the screen resolutions in which it is

I am encountering an issue with my HTML component that utilizes a booking engine. The parent width of the component is set, and the children elements inherit this width. There are three input fields and a search button within the component. The problem ari ...

Background color for the DIV is not displaying properly when it is set to the

While trying to set the background color of a div to light blue #2390bb, I encountered an issue. Even though I have already set the body background color to Light Grey#D6D6D6, the light blue color doesn't display in the div. Can anyone help me figure ...

Validation on the client side will now support the input of comma-separated values

Is there a way to use the jQuery.validator.addClassRules method in order to validate input fields and restrict my textbox to only accept comma-separated values? I also want it to display a default message if incorrect. <input type="text" cla ...

The <ul> tag is not receiving the correct styles and is not displaying properly

I have successfully integrated an input control and button into my table within the Angular 7 application. When a user inputs text in the control and clicks the add button, the text is appended to the <ul> list. However, the layout of the <ul> ...

What is causing IE10 to display such a drastically different appearance?

I am currently implementing a cool image fade swap effect using CSS and JQuery along with an image sprite. JQuery: <script type="text/javascript> $(document).ready(function() { $('.otherbutton').append('<img class="hov ...

Unable to assign the value of 'innerHTML' to a null property during an AJAX request

I have searched through numerous articles on this site, but I haven't been able to find the solution I'm looking for. Every time I click a cell in my custom div table, I receive the frustrating message "Cannot set property 'innerHTML' ...

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

Adding a 'dot' to the progress bar in Bootstrap enhances its visual appeal

I am currently working on a progress bar and I would like it to look similar to this: https://i.sstatic.net/TSDEy.png However, my current output looks like this: https://i.sstatic.net/rQhYc.png I'm puzzled as to why the tooltip is floating there, ...

Mastering the art of customizing jQuery Mobile skins

Just landed a front end developer role at a prominent bank where I'll be focusing on the UI using jQuery Mobile. I'm looking for a comprehensive page that contains all the assets of jQuery Mobile to streamline the skinning process. Any leads? ...

Guide to changing the background colors of multiple elements when hovered over by the mouse?

I want to customize my website's search bar by changing the background color when it is hovered over. Currently, the search bar has two main elements: the text box and the submit button. I have successfully programmed the text box element to change to ...

Is there a way to automatically determine the text direction based on the language in the input text?

When posting in Google Plus (and other platforms), I noticed that when I type in Persian, which is a right-to-left language, the text direction changes automatically to rtl and text-alignment:right. However, when I switch to English, the direction switches ...

Arranging various JavaScript arrays

I've been working on a script using the Haversine formula, but I'm running into an issue where it always directs me to the first location in the array, no matter how many times I switch them around. Any suggestions? var locations = new Array( ...

Create a stylish frame for designated rows within a table

Col1 Col2 Col3 Col4 Col5 Col6 Row11 Row12 Row13 Row14 Row15 Row16 Row21 Row22 Row23 Row24 Row25 Row26 Row31 Row32 Row33 Row34 Row35 Row36 Looking for a way to add a border around rows with matching values in the first column, or around a specif ...

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

Tips for automatically scrolling images horizontally in responsive layouts

Recently, I've been working on a website called . On the homepage, my portfolio images are arranged in a grid format using the <li> tag. I'm looking to align them side by side and have them scroll horizontally automatically, preferably with ...