I have varying sizes of text that I would like to organize into 4 divs in the center of the page, similar to this image http://firepic.org/images/2015-08/22/0b0r536o40es.png
However, it seems that my pink div is causing the ones below it to be pushed down. How can I resolve this issue?
Thank you
.container {
background: grey;
height: 300px;
width: 300px;
}
p {
vertical-align: middle;
}
#one {
background: red;
float: left;
width: 150px;
height:150px;
text-align: center;
}
#two {
background: yellow;
float: right;
width: 150px;
height:200px;
text-align: center;
}
#three {
background: orange;
float: left;
width: 150px;
height:150px;
text-align: center;
}
#four {
background: purple;
float: right;
width: 150px;
height:100px;
text-align: center;
}<html>
<body>
<div class="container">
<div id="one"><p>CONTENT</p></div>
<div id="two"><p>CONTENT</p></div>
<div id="three"><p>CONTENT</p></div>
<div id="four"><p>CONTENT</p></div>
</div>
</body>
</html>If you want to implement the desired functionality, you can do so by utilizing a table
table {
width: 50%;
border-collapse: collapse;
margin: auto;
}
tr > td {
width: 50%;
text-align: center;
padding: 3px;
vertical-align: top;
}<table>
<tr>
<td style="background: lightblue;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, officiis facere dignissimos saepe voluptates, porro itaque eveniet reiciendis eius perferendis?</td>
<td style="background: pink">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores asperiores inventore eveniet quas praesentium, dignissimos cum omnis architecto</td>
</tr>
<tr>
<td style="background: royalblue;">Lorem ipsum dolor inventore libero qui explicabo ea incidunt maxime blanditiis assumenda? Iusto, at ipsam eveniet!</td>
<td style="background: cyan;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quis, quo ea est nostrum veniam?</td>
</tr>
</table>Looking for guidance as I dive into jQuery and navigate the complexities... HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" hre ...
I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...
My a tag with an image inside seems to be extending below the image, resulting in a small blue tic mark on the bottom right side. I've attempted different CSS solutions such as setting border to none, but nothing has resolved the issue. Any assistance ...
This PHP file is responsible for downloading image and data files from the server. <?php header("Cache-Control: no-cache, must-revalidate"); //header("Expires: Tue, 25 sep 2012 09:00:00 GMT+5.30"); header("Content-Type: applica ...
I'm struggling to prevent the context menu from showing under certain conditions. Despite following the guidelines in this post, the context menu continues to appear. My goal is to implement a context menu on p-table where it should only show if there ...
As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...
It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...
Can someone please help me troubleshoot this code? I'm unable to figure out what's going wrong. The concept is to take user input, assign it to a variable, and then display a string. However, nothing appears on the screen after entering a name. ...
After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...
Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...
Can someone help me transform this code snippet with Python 3 and Beautiful Soup? <span class="ld-nowrap"> 20th century’s </span> I need to convert it to: <em> 20th century’s </em> Any suggestions on how to achieve t ...
I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...
Currently, I am using selenium webDriver in C# on a Windows platform to automate tests involving HTML5 drag and drop. In my approach, I rely on the dragTo method from Selenium for achieving this functionality successfully in one test. However, when I attem ...
Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...
<vs-tr :key="i" v-for="(daydatasT, i) in daydatas"> <vs-td>{{ daydatasT.Machinecd }}</vs-td> <vs-td>{{ daydatasT.Checkdt }}</vs-td> <vs-td>{{ daydatasT.CheckItemnm }}< ...
I am facing an issue with a group of radio buttons that I have styled to display as block elements, making them look like buttons while hiding the actual radio button itself. This setup works perfectly on Chrome and Firefox on desktops and Android tablets, ...
Encountering a peculiar issue with multiple select boxes in my project. Some of the options within the select box are exceeding the width of the box. Proper Dropdown View: https://i.sstatic.net/xDy6I.jpg Incorrect Dropdown Display: https://i.sstatic.ne ...
Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...
I have attempted numerous methods, but the menu keeps showing up in the same way every time. I've experimented with changing the height from 0 to 20%, width from 0 to 100%, using jQuery, JavaScript, slideUp/Down, hide/Show, adjusting margin-bottom fro ...
My current challenge involves setting a background image for a mobile page using a new image specifically designed for mobile devices. The image is set with the property background-size: cover, and it works perfectly on all platforms except for mobile Chro ...