I'm trying to achieve a layout with 2 rows using floated divs. The top row should have 3 columns, while the bottom row should have 2 columns. Can anyone help me figure out how to do this? I am clueless about floated divs.
Appreciate the assistance in advance!
Creating Columns with HTML and CSS
<div class="left-column">Column1</div>
<div class="center-column">Column2</div>
<div class="right-column">Column3</div>
<div class="left-column">Column4</div>
<div class="left-column">Column5</div>
CSS Styling
.left-column {
background-color: red;
float: left;
}
.center-column {
background-color: orange;
float: none;
}
.right-column {
background-color: green;
float: right;
}
Check it out on Fiddle: view fiddle
Here is an example I created for you to check out: http://jsfiddle.net/ADQ8g/
Here is the HTML code:
<div class="table-wrapper">
<div class="row row1">
<div class="column">
content goes here
</div>
<div class="column">
content goes here
</div>
<div class="column">
content goes here
</div>
</div>
<div class="row row2">
<div class="column">
content goes here
</div>
<div class="column">
content goes here
</div>
</div>
</div>
And here is the CSS code:
.row:after {
display: block;
clear: both;
content: "";
}
.row1 {
background-color: red;
}
.row2 {
background-color: green;
}
.row1 .column {
width: 33.3333%;
}
.row2 .column {
width: 50%;
}
.column {
float: left;
text-align: center;
}
If you have any more questions, feel free to ask!
<div class="row">
<div class="width-3">Unique Content</div>
<div class="width-3">Unique Content</div>
<div class="width-3">Unique Content</div>
<div style="clear: both"></div>
</div>
<div class="row">
<div class="width-2">Unique Content</div>
<div class="width-2">Unique Content</div>
<div style="clear: both"></div>
</div>
CSS can be customized as needed
.width-3 {
float: left;
width: 33.33%;
}
.width-2 {
width: 50%;
float: left;
}
To add padding, insert a new division inside width-2 or width-3 instead of applying padding or margin directly to them.
Creating an HTML Layout
<div>
<div class="float-left bd-black w33">
Section 1
</div>
<div class="float-left bd-black w33">
Section 2
</div>
<div class="float-left bd-black w33">
Section 3
</div>
</div>
<div class="clear-both">
<div class="float-left bd-black w495">
Main Content 1
</div>
<div class="float-left bd-black w495">
Main Content 2
</div>
</div>
Adding CSS Styling
.bd-black
{
border: 1px solid black;
box-sizing: border-box;
overflow: hidden;
}
.float-left
{
float: left;
}
.clear-both
{
clear: both;
}
.w33
{
width: 33%;
}
.w495
{
width: 49.5%;
}
Give it a try and see if it fits your needs.
API calls are my jam, and I'm trying to display the JSON results in a nice tabular format using angularjs. To achieve this, I've set up a function (myfunc) with a hardcoded array called train. Now all that's left is to print this array in a ...
I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why t ...
I have created this design using CSS and Bootstrap. However, I am encountering an issue with responsiveness. Can someone assist me in making this design responsive? HTML: .ordering .spanone { position: absolute; width: 100px; left: 43%; right: ...
I am currently facing a challenge with creating an OR divider using Bootstrap 5, as it seems to not display correctly when compared to Bootstrap 4. The text's background color also appears to have some transparency in my project. Here is the code I a ...
I've been working with tables and I'm trying to create a dropdown list with 3 dots in each table row. I've experimented with a few libraries and custom dropdown options, but none of them seem to be working properly. What I'm looking fo ...
To achieve the desired effect, the image should be placed inside a circle with a white background. The image size should be smaller than the circle and centered within it. One possible way to accomplish this is: .icon i { color: #fff; width: 40px; ...
Seeking guidance on a perplexing issue. Here is a basic code snippet to depict my dilemma: html: <form> <input type="number" id="someNumber"> <input type="button" id="submitBtn"> </form> jquery: $("#submitBtn"). ...
Hey there! I've got an interesting challenge for you. I have four mp4 videos featuring a cartoon character performing various emotes. My goal is to create a toggle switch that, when activated, will display the first video (intro) along with three butt ...
My task is to convert meter values to yard using two dropdowns. The first dropdown contains various values, while the second dropdown has "meter" and "yard" options. If "meter" is selected in the second dropdown, the values in the first dropdown remain unc ...
I'm currently facing an issue with fading in tabs in my project. Each tab has a unique ID which corresponds to the item in local storage that I want to fadeIn. For example, I have a tab called 'Tab1' and I try to show it using $('Tab1& ...
content: string; this.content = "There was an issue processing your request. Please try using the browser back button."; .content{ white-space: pre-line; } <div class="card-body text-center"> <span class="content"> {{ content }} </span& ...
I am facing an issue with my datatable as the table is not displaying correctly. Could someone advise me on how to troubleshoot and fix this problem? Below is the code snippet in question: $(tbName).dataTable({ "sScrollX": "100%", "sScro ...
My HTML file contains the following JavaScript code: var a=["","#"] I want to append a value after the # symbol by specifying that value in the website URL. For example: site.com/#value Therefore, the updated JavaScript code will be: var a=["","#va ...
I am trying to customize a sweetAlert2 by defining a className, but it seems that the styling is not applying to the sweet alert. I have tried calling the class name "styleTitle" and various other names, but nothing seems to work. Could the issue be with t ...
I am encountering some challenges when attempting to hover over a td with rowspan in my HTML table. Despite searching for a solution, I have not been successful. I came across suggestions on forums that hinted at using JS/jQuery. Could someone please provi ...
I've been attempting to implement a for loop in a JavaScript bar graph that resets the bar height to 0 when a button is clicked, but it doesn't seem to be working as expected. I've tried checking the console in Google Developer tools for err ...
One of the requirements for my project is to redirect users to the login page before loading the Angular2 application, without actually loading it. The project is built using angular2-quicksart. After minifying the Angular2 js file: <script> va ...
I have been working on displaying images from the IMDb API in my project. Everything works perfectly fine when I test it locally, but once I deploy the project to a server, the images do not load initially. Strangely, if I open the same image in a new tab ...
Using jQuery, I have created a form where the entered text is appended to certain elements. This functionality works correctly. Additionally, I have included a remove link with each added element. When someone clicks on the remove button, it should remove ...
Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...