The arrangement of divs in a modern metropolitan aesthetic

I'm facing an issue with the positioning of the tiles div in metro u. This is specifically for SharePoint, so I can only work with CSS/HTML and not JavaScript. The problem seems to be a missing div on the left side. Any assistance would be greatly appreciated.

Here's a sample in JSFiddle

<style type='text/css'>
  body { margin:0; padding:0; }
.clear { clear:both; }
#wrapper { margin:0 auto; width:1400px; }
#header { width:990px; height:120px; background: #0E83CD ; margin:5px auto;}
#block1 { width:646px; height:389px; float:left; background: #64BB5D; margin:5px; }
#block2 { width:110px; height:150px; float:left; background: #EB6890 ; margin:5px; }
#block3 { width:323px; height:190px; float:left; margin:5px; }
#block4 { width:646px; height:190px; float:left; margin:5px; }
.color1 { background: #E7333F ; }
.color2 { background: #0AA444 ; }
.color3 { background: #F40D43 ; }
#footer { width:990px; height:120px; background: #3C6DF0 ; margin:5px auto;}
#header:hover,#block1:hover,#block2:hover,#block3:hover, #block4:hover { background:#888888; -moz-transform: scale(1.1) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg); }
</style>

<div id="wrapper"> 

      <div id="block4" class="color1"> </div><!--block-long-->
    <div id="block3" class="color3"></div><!--block-short-->
    <div id="block3" class="color3"></div><!--block-short-->

    <div class="clear"></div> 

             <div id="block3" class="color3"></div><!--block-short-->



    <div id="block1"></div><!--block-big-->


      <div id="block3" class="color3"></div><!--block-short-->
          <div id="block3" class="color3"></div><!--block-short-->

  <div class="clear"></div> 

        <div id="block4" class="color1"> </div><!--block-long-->

          <div id="block4" class="color2"> </div><!--block-long-->



    <div class="clear"></div>


</div><!--wrapper-->
htmlcss

Answer №1

Take a look at this JSFiddle. I noticed that one block was missing, and it's better to use classes instead of ids if you need to apply styles to multiple elements. I added a class for the missing block and replaced the margins you had used for #block3 with a new class .block-3. Remember, each id must be unique, so it's advisable to transfer all styles from ids to classes.

.block-x {
    margin: 204px 5px 5px -328px;
}

Answer №2

Here is your response... I have made some corrections in the code by replacing "id" with "class" and also added a missing div element. Hopefully, this aligns with your requirements.

Your CSS

<style type='text/css'>
body { margin:0; padding:0; }
.clear { clear:both; }
#wrapper { margin:0 auto; width:1400px; }
#header { width:990px; height:120px; background: #0E83CD ; margin:5px auto;}
#block1 { width:646px; height:389px; float:left; background: #64BB5D; margin:5px; }
#block2 { width:110px; height:150px; float:left; background: #EB6890;margin:5px; }
.block3 { width:323px; height:190px; float:left; margin:5px; }
.block4 { width:646px; height:190px; float:left; margin:5px; }
.color1 { background: #E7333F ; }
.color2 { background: #0AA444 ; }
.color3 { background: #F40D43 ; }
#subdivholder{width:336px; float:left;display:inline-block;} <!--New inserted code-->
#footer { width:990px; height:120px; background: #3C6DF0 ; margin:5px auto;}
#header:hover,#block1:hover,#block2:hover,.block3:hover, .block4:hover { background:#888888; -moz-transform: scale(1.1) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
}
</style>

Your HTML

<div id="wrapper"> 
<div class="block4 color1"> </div><!--block-long-->
<div class="block3 color3"></div><!--block-short-->
<div class="block3 color3"></div><!--block-short-->
<div class="clear"></div> 
<div id="subdivholder"><!--New inserted code-->
         <div class="block3 color3"></div><!--block-short-->
         <div class="block3 color3"></div><!--block-short-->
</div>
<div id="block1"></div><!--block-big-->
<div class="block3 color3"></div><!--block-short-->
<div class="block3 color3"></div><!--block-short-->
<div class="clear"></div> 
<div class="block4 color1"> </div><!--block-long-->
<div class="block4 color2"> </div><!--block-long-->
<div class="clear"></div>
</div><!--wrapper-->

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

Tips for reducing word length in Bootstrap card text using Django and CSS

For my journal entries, I'm using Bootstrap's card component. It looks like this: View Journal List However, when I have a lot of text in the entry, the card stretches out too long. View Journal List with a Really Long Entry I want to show ju ...

pythonhtmlcssdjangobootstrap-4

Is there a more effective method for concealing arrows while scrolling?

I'm attempting to conceal the arrow that appears above the selected header, as depicted below. https://i.stack.imgur.com/wyxdF.png While scrolling, I aim to hide the arrow that appears on the header Company, especially when the first column is sticky ...

htmlcsshtml-tablescroll

Placing an order and obtaining the associated reservation_id through the use of SQL, PHP, and an html5 form

I have multiple forms with distinct purposes: The first form collects information such as the reservation date, customer details, and the table assigned for that specific date. In the second form, I capture data to place an order. This includes entering ...

phphtmlmysqlsqldatabase

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

javascriptphpjqueryhtmlmysql

Instructions for positioning two 3D models within separate div elements using Three.js

The website contains various divs with classes such as "skin", "skin2", "skin3"... And each class corresponds to a different 3d model that needs to be placed. I am attempting to achieve this, but all the 3d models seem to be c ...

javascripthtmlthree.js

Ways to verify the application of CSS hyphens using Chrome's developer tools

I cannot seem to get automatic hyphens to work via CSS. I have applied the following CSS: body { -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } Despite adding this CSS, my text is not being hyph ...

htmlcssgoogle-chromegoogle-chrome-devtoolscss-hyphens

Responsive Bootstrap 5 table - occupies full width on mobile devices, adjusts automatically on desktop screens

Is there a way to create a table that is full width on mobile using pure bootstrap classes, but only auto width on desktop? I attempted to achieve this with the following code: <table class="table table-bordered w-md-auto w-100 text-start mb-2&quo ...

htmlcssbootstrap-5

Navigating through each segment

I'm currently working on a website with sections that are set to be 100% height of the window, but at least 800px tall. My goal is to implement a smooth scrolling functionality where one scroll moves the view from section to section. However, if the ...

javascriptjqueryhtmlcss

What could be causing the issue of nth-child blocking the functionality of a:hover styles?

I have a unique collection of images that are styled to resemble polaroid pictures. Each image is given a slight rotation. a.polaroid { transform: rotate(-2deg); } On hover, a scale transformation is applied. a.polaroid:hover { transform: scale(1 ...

csstransform

Using CSS3 to Create a Pie Chart

Looking to design a symmetrical pie chart featuring 6 pieces, each at 60 degrees, using only html and CSS3. Came across an article , but the concept is unclear to me. Seeking assistance or explanation on the classes mentioned in the link: .pieSliceBlue, ...

css

Utilizing Bootstrap's column grid system (col-sm) to set the width of form controls

Is it possible to utilize col-sm or col-xs within the input tag to specify its width? <div> <input type="button" class="col-sm-2" value="Clear"> <input type="button" class="col-sm-2" value="Confirm"> </div> ...

htmltwitter-bootstrapcsscoding-style

Adjust the field's color depending on the outcome displayed within

I'm trying to implement a feature where the field value changes to green when "OK" is selected and red when "NOK" is chosen. I have written the following JavaScript code but it's not working as expected - the colors change before clicking submit, ...

javascripthtmljquerycss

Guide to opening all href links in a new window

When loading HTML content parsed from an email to a frame, the issue arises when there is an href link that tries to open in the same frame. I want to modify it so that it opens in a new tab instead. Usually, setting the target to _blank in the href would ...

javascripthtmlemailasp-classicframe

How can I trigger the execution of textarea HTML code with an onClick event using JavaScript?

When my fingers are lifted from the keyboard, some code will be automatically executed. I want to trigger this function when I click a button (onclick) instead of using onkeyup. <div id="result"></div> <textarea ...

javascripthtmlcss

TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...

htmlcsstinymce

Step-by-step guide on aligning an image to the left of text in a Material UI table column

After experimenting with inline styling, I attempted to move the images next to the text in a specific column. However, there are some rows where the images overlap or the text is positioned too far to the right, as shown in this image: https://i.stack.im ...

cssreactjshtml-tablematerial-ui

How to access a separate database's Javascript library in XPages resources

Is there a way to import the javascript library from another database (content.nsf) into my current xpages database resources? I am trying to load the common.js file using the code below but it's not working. Can someone please help me correct it? &l ...

htmlxpages

Using the ampersand symbol '&' in Sass to target the body tag with a particular class applied

Demo: https://codepen.io/moradxd/pen/WJpPyQ Consider this sample HTML code: <body class="boxed"> <div class="text-white"> <a href="#" class="btn-featured">Button</a> </div> </dody> I am implementing the follow ...

csssass

How can I position a logo slightly off center to the left, rather than all the way to the left?

I attempted to implement this code: <div id="logo" style="background-image: url('http://comprogroup2ict2b.rf.gd/logo.png'); width: 100px; height: 50px; background-size: contain; background-repeat:no-repeat; float: left"> ...

htmlcss

How come specifying html { font-size: 1rem; } results in a 1px border on the right side?

I have been working with Bootstrap 4 and have implemented a navbar, among other things. While learning about media queries, I came across a CSS rule that allows me to adjust the font size slightly throughout my page... html { font-size: 0.9rem; } Howe ...

csstwitter-bootstrapbootstrap-4