Parallel with one <div> and subsequently another <div>

I have been challenged by HTML and CSS to embrace humility:

Attempting to replicate the following design:

Here is my effort:

<div>
  <div style="width:800px;">
    <div style="float:left;width:25%;background-color:red;">Facility #: COMPANY10</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">FACILITY_112</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">Facility Code: 4071</div>
  </div>
  <div style="width:800px;">
    <div style="float:left;width:25%;background-color:red;">Date: Jul 17, 2014</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">Custom Assessment (UDA) Report</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">User: John Wayne</div>
  </div>
  <div>
    Time: 12:59:11 ET
  </div>
  <div>
    <hr/>
    Assessment Type: 1 - Braden Scale for Predicting Pressure Sore Risk
    <hr/>
  </div>
</div>

This leads to:

In need of assistance on how to fix this. Please help.

Answer №1

Keep the maximum width of your main <div> element restricted to 800px.

Answer №2

Relocate the width: 800px setting to the main container:

<div style="width:800px;">
  <div>
    <div style="float:left;width:25%;background-color:red;">Facility #: COMPANY10</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">FACILITY_112</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">Facility Code: 4071</div>
  </div>
  <div>
    <div style="float:left;width:25%;background-color:red;">Date: Jul 17, 2014</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">Custom Assessment (UDA) Report</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">User: John Wayne</div>
  </div>
  <div>
    Time: 12:59:11 ET
  </div>
  <div>
    <hr/>
    Assessment Type: 1 - Braden Scale for Predicting Pressure Sore Risk
    <hr/>
  </div>
</div>

...and refrain from using inline CSS styles

Answer №3

If you need to ensure that a floating div appears on a new line, simply apply the clear property:

<div style="clear:both">

By doing this, any existing left-floating elements will be disregarded and any future float left elements will start on a new line.

Answer №4

Make sure to add the following code inside the third div

clear:both;

This will result in something similar to:

<div style="clear:both;">
   Time: 12:59:11 ET
</div>

Check out the demo here: http://jsfiddle.net/EZ7wU/

Answer №5

Consider refraining from using inline css styles and focusing on a more organized html layout.

To display the content for the second row, place it within its own separate div:

<div style="clear: both;">
  <time>Time: 09:32:45 PT</time>
  <div>
    <hr/>
    Description: Specialized equipment for medical procedures
    <hr/>
  </div>
</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

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

Ways to retrieve the innerHTML of a Script Tag

After spending what feels like an eternity searching, I still can't figure out how to get the innerHTML of a script tag. Here's where I'm at... <script type="text/javascript" src="http://www.google.com" id="externalScript"></script ...

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

Creating layered images with CSS Grid

Visit this link for more details I've been attempting to create an overlap effect with 3 photos using CSS Grid. My desired outcome looks like this: Click here to see the desired result I followed tutorials that demonstrate the same method, but unfo ...

Issue with custom page not displaying summary image in Moodle

Whenever I try to fetch a summary image on my customized page, it does not show the image's name and instead displays a small icon image. echo format_text($course->summary); Click here for an example image ...

Tips for creating a flexbox layout that is responsive to different screen

Currently, I am using flex to ensure that the two inner div elements have the same height. However, the design is not responsive as it appears perfectly in a full-width window but gets squeezed on mobile devices. Is there a solution to this issue? Are th ...

Setting a CSS grid column to have a minimum width of `max-content` and a specific

I am trying to create a CSS grid where the column widths adjust based on the content, but with a minimum width of 100px. I attempted using minmax(max-content, 100px), however it did not produce the desired result. In the example below, the narrow column sh ...

Display or conceal form elements depending on the JSON response

Upon making an api call, a json Response is received with the following structure: {"Field":"Amount","FieldName":"Amount","FieldType":"Numeric","MaximumLength":128,"MinimumLength":0,"Options":"Mandatory"} This api call yields between 5-10 of these object ...

Storing a portion of JSON data within a function called in the HTML document

I've been working with Angular and need to save a portion of JSON data in a variable within a function that is called in an HTML file: <select id="postazione" onchange="postazioneSelezionata()"> <option value="" selected disabled >Cho ...

Steadfast item securely fastened to its guardian

How can I ensure a fixed object within a relatively positioned parent is clipped to its parent's boundaries as it moves with scrolling down the page? I have been trying to find a solution for this issue, but haven't had any luck so far. ...

How come outerHTML retrieves <!-- --> comments?

I came across a jsfiddle link that showcases the collection of outerHTML for elements with a class='active'. Surprisingly, even when certain parts of the HTML are commented out like this: <!-- <div>'Some inner text'</d ...

BeautifulSoup: Discovering all hyperlinks within a specified div class

Currently, I am in the process of gathering all href's from a div with the class 'server-name' on disboard.org/. Source-Code: def gather_links(): url = 'https://disboard.org/search?keyword=hacking' response = requests.get ...

Numerous Radio Buttons

I am currently working on creating a quiz similar to those found on Buzzfeed and Zimbio. I apologize if this question has been asked before, but despite my efforts in searching, I have not been able to find the answer I am looking for. In this quiz, partic ...

Troubles with CSS drop down alignment in Internet Explorer 7

I've been racking my brain all morning trying to solve this issue. My current project involves creating a website for a client, and I'm having trouble getting the dropdown menu to position correctly in IE7. It's working fine in all other br ...

switch between showing and hiding dynamic table rows

As I dynamically add rows to a table, each row can either be a parent row or a child row. My goal is to toggle the visibility of child rows when the parent row is clicked. if (response != null && response != "") { ...

Achieve this effect by making sure that when a user scrolls on their browser, 50% of the content is entered into view and the remaining 50%

Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom. ...

Verify the level of opacity in the image

I'm working on a website that allows users to upload PNG images and save them. However, before they can save the image, I need to check if it contains transparency. Is there a way to determine if an image is not 24-bit using JavaScript? <img id= ...

Which specific CSS attributes should be applied to create a scroll bar within this table?

Below is the table that I am working with: 'table' I want to ensure that its width remains the same even when the screen size is reduced, and only add a scroll bar to view it. I have already included overflow: scroll; in the container <div> ...

What is the best way to arrange these divs one on top of another?

I have combed through numerous resources but still haven't found a solution to my problem. I am struggling with figuring out how to stack the "top_section" div on top of the "middle_section" div. Currently, "middle_section" is appearing above "top_sec ...

Elements shifting positions based on the size of the window

I am facing an issue with positioning the register form on my website. I want it to be fixed at the bottom-right corner of the window, without reaching the top. Although I managed to achieve this, the problem arises when the screen resolution changes. For ...