Can divs be floated within another div like this?
Here is the code:
<div class="event_month">
<div class="event1">1</div>
<div class="event2">2</div>
<div class="event3">3</div>
<div class="event4">4</div>
<div class="event5">5</div>
</div>
Can divs be floated within another div like this?
Here is the code:
<div class="event_month">
<div class="event1">1</div>
<div class="event2">2</div>
<div class="event3">3</div>
<div class="event4">4</div>
<div class="event5">5</div>
</div>
Here is a CSS solution tailored for modern web browsers:
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
CSS
ul {
width: 210px;
background: chocolate;
margin: 20px;
padding: 0 10px 10px;
list-style: none;
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-width: 100px;
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-gap: 10px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
font-size: 0;
}
li {
display: inline-block;
width: 100px;
height: 60px;
background: beige;
margin-top: 10px;
font-size: 14px;
text-align: center;
line-height: 60px;
}
Note: Internet Explorer 10 should be able to interpret CSS columns.
Update: You can also achieve the same result using divs, just as a demonstration...
Update 2: Chrome (Webkit) might have display issues if you only float the wrapper. Setting a width for the wrapper may be necessary for proper fitting.
Does this meet your criteria?
HTML:
<div class="calendar_events outer_design">
<div class="align-left">
<div class="event_one">1</div>
<div class="event_two">2</div>
<div class="event_three">3</div>
</div>
<div class="align-left">
<div class="event_four">4</div>
<div class="event_five">5</div>
</div>
</div>
CSS:
.align-left {
text-align: left;
}
Example: http://jsfiddle.net/ABC123/4/
In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...
I am attempting to replicate the header-graphic navigation found on this website: It appears that they are not using a grid for the header-graphic area, but rather keeping them separated as 2 divs within their Hero block container. I am interested in recr ...
Ever since upgrading my app to cordova 5.1.1, I've noticed that the meta viewport no longer functions properly on Android devices. The app is not displaying correctly as a result. Despite trying various solutions, I am still facing this issue. Is ther ...
Seeking assistance with a website project I am currently working on. The project consists of 7 HTML documents, 3 stylesheets, 8 JavaScript files (including jQuery.min.js and some additional jQuery plugins), and various images. I am looking to bundle and mi ...
I have encountered an error when using the align attribute. How can I fix this issue with the correct HTML5 compatible syntax? <table style="margin: 0 auto;"> <tbody> <tr> <td><input typ ...
<div id="homePage" style="position: relative; margin: 0px; width: 320px; height: 420px;"> <img id="userImg" src="images/5.jpg" width="100%" height="100%" onclick="imageClick()" style=" z-index: -1; margin: 0 ...
https://jsfiddle.net/3vz45os8/7/ I'm working on a JSFiddle where I am trying to change the background color of input text based on whether the word is typed correctly or incorrectly. Currently, it's not functioning as expected and there are no e ...
I have a canvas animation in JavaScript that is currently limited to one canvas element with the id "stars". I want to be able to use this animation multiple times without repeating the code. Is there a way to add a class for the canvas elements instead of ...
Is it possible to use a single alias for multiple font names in CSS? For example, if I have font-family: 'Font A', 'Font B', 'Font C', ..., sans-serif; Can I simplify this to just one name to refer to all those fonts, like t ...
I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li. The current problem I am encountering is that the code changes the class for all li elements, ...
Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...
I'm currently trying to use a star image as a custom bullet point on an <li> element. However, I'm facing the issue where the bottom of the image aligns with the font's baseline, causing the image to be pushed upwards. Is there any sol ...
My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...
I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down. The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Desp ...
Need help extending the border-top of an element beyond a container width set to 1024px, while maintaining center alignment on the page with left alignment. Thank you! Here is the code snippet: HTML <main> <div> <span>Hello& ...
In order to style the parent element differently from the child element, you can use specific CSS rules for each. For example, you may want to underline the parent element while leaving the child elements unaffected. .parent { text-decoration: underli ...
I’m having trouble displaying a background image in a table within my Django app. Here’s the code I’m using: <table style="background-image: url('/static/assets/img/myimage.png') ;background-position: 0 100% !important;background-repeat ...
My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...
I'm struggling to create an HTML email that will display correctly in Outlook. I initially used list items and the list-style-image Property, but that doesn't work in Outlook. Essentially, I have a table with 2 rows. The left row has an 11 pixel ...
I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...