Basic HTML user interface elements

I'm struggling with some basic HTML/CSS and I'm looking for guidance on what I might be doing incorrectly or if there is a more efficient approach?

I'm attempting to create a simple user interface, and while I have put this together, it doesn't seem to work correctly. Box4 and 6 are causing issues when I resize the browser window:

<style type="text/css">
.box1
{
    width:100%;
    height:25%;
    background-color:#eee;
}
.box2
{
    width:60%;
    height:56%;
    background-color:#eee;
    float:left;
    margin-top:1%;
}
.box3
{
    width:39%;
    height:40%;
    background-color:#eee;
    margin-left:61%;
    margin-top:1%;

}
.box4
{

    width:39%;
    height:14%;
    background-color:#eee;
    margin-left:61%;
    margin-top:1%;  

}
.box5
{
    width:50%;
    height:14%;
    background-color:#eee;
    float:left;
    margin-top:1%;
}
.box6
{
    width:49%;
    height:14%;
    background-color:#eee;
    margin-left:51%;
    margin-top:1%;

}


html,body{
    height:100%;
    //width:100%;
}
</style>


<div class="box1">
    box1
</div>
<div class="box2">
    box2
</div>
<div class="box3">
    box3
</div>
<div class="box4">
    box4
</div>
<div class="box5">
    box5
</div>
<div class="box6">
    box6
</div>

Edit - included a screenshot of the issue I'm facing when resizing the browser window. Link to Image

Any assistance would be greatly appreciated.

Slash.

Answer №1

Give this a shot

html,body{height:100%;}
.box1{width:100%;height:25%;background-color:#eee;}
.box2{width:60%;height:56%;background-color:#eee;}
.box3{width:39%;height:40%;background-color:#eee;}
.box4{width:39%;height:15.5%;background-color:#eee;}
.box5{width:50%;height:14%;background-color:#eee;}
.box6{width:49%;height:14%;background-color:#eee;}
body > div {
    float: left;
    vertical-align: top;
    margin: 3px 0 0 3px;
}
<div class="box1">
  box1
</div>
<div class="box2">
  box2
</div>
<div class="box3">
  box3
</div>
<div class="box4">
  box4
</div>
<div class="box5">
  box5
</div>
<div class="box6">
  box6
</div>

Answer №2

Everything appears to be functioning correctly here. Can you provide more specific details about the issue?

html,body{height:100%;/*width:100%;*/}
.box1{width:100%;height:25%;background-color:#eee;}
.box2{width:60%;height:56%;background-color:#eee;float:left;margin-top:1%;}
.box3{width:39%;height:40%;background-color:#eee;margin-left:61%;margin-top:1%;}
.box4{width:39%;height:14%;background-color:#eee;margin-left:61%;margin-top:1%;}
.box5{width:50%;height:14%;background-color:#eee;float:left;margin-top:1%;}
.box6{width:49%;height:14%;background-color:#eee;margin-left:51%;margin-top:1%;}
<div class="box1">
  box1
</div>
<div class="box2">
  box2
</div>
<div class="box3">
  box3
</div>
<div class="box4">
  box4
</div>
<div class="box5">
  box5
</div>
<div class="box6">
  box6
</div>

Answer №3

Did you verify the combined height percentage? It looks like box 2 has a height of 56%, while boxes 3 and 4 add up to 55% (factoring in the 1% margin).

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

Ways to retrieve dropdown values

My HTML code is as follows: <select class="height_selected"> <option>Select Height</option> <option ng-model="userHeight" ng-init="1" value="1">123 cm</option> <option ng-model="userHeight" ng-init="2" v ...

Navigation Menu in Motion

I'm currently working on a website for my F1 in Schools team and I'm looking to implement a feature where the button in the navigation bar changes its background color and font color when that section of the page is active, even while scrolling o ...

Is there a way to automatically scroll to the last dynamically added div?

Within the chat.html file, I have included a div tag and implemented a script that dynamically adds rows to the div when a button is clicked. In another file named list.html, I have inserted an iframe tag with the src attribute pointing to chat.html. Howev ...

Correcting the reference to "/" (root) for assets after relocating the site to a subdirectory

I currently have a website located in the public_html directory, where all assets (images, css, js, etc) are referenced using /asset_folder/asset. The "/" at the beginning ensures that the browser starts from the root and navigates through the directories. ...

Navigating through the img src using JavaScript

Currently, I am working on a task that involves the following code snippet: <input type="file" id="uploadImage" name="image" /> <input type="submit" id="ImageName" name="submit" value="Submit"> My goal is to have the path of the selected imag ...

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

Is the footer html/css duplicated on a different page and displaying differently?

I have been working on a website and just finished the main page with the header, body, and footer. Now, as I moved on to creating the second page, I encountered an issue. I copied and pasted the code for the header from the main page onto the second page ...

Tips for Accessing a New Website Using the Floating Layer Close Button

How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...

Utilizing CSS3 Animation for enhanced hover effects

I have a setup with two divs. One of the divs expands in height when I hover over it. What I'm trying to achieve is to display text with a fade-in effect somewhere on the screen when I hover over that specific div. Additionally, I want to show another ...

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace: this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product[&apos ...

What is the best way to assign an active class to a specific footer ID on an HTML page using AngularJS?

I tried using the activeLink directive to apply an active class to a specific id on the page, but it didn't work as expected. .directive('activeLink', ['$location', function (location) { return { restrict: 'A', ...

What are the best ways to change the styling of jquery ui widgets?

Currently utilizing jQuery UI, I have encountered an issue with the font size within a dialog. When utilizing the standard settings, the font size appears to be excessively large. To address this, I used the element inspector to identify the class name o ...

Node.js is great at hosting HTML files, but struggles when it comes to loading script files within those pages

Recently, I’ve been working on creating a simple login page using a mongoDB database along with Node.js and express. Since I'm still new to Node.js, I'm facing an issue that seems more complicated than it actually is. The main problem I’m en ...

Support for these CSS properties of left: 0; and right: 0; are compatible with

Just wondering if it's okay to utilize the CSS code below to ensure the element adjusts to its parent's width. .element { position: absolute; left: 0; right: 0; background-color: #ccc; border-top: 1px solid #ddd; } We don&ap ...

The reason the CSS direct descendant selector does not affect Angular components

We are working with a basic main.html. <app> <sidebar></sidebar> <main-content> <router-outlet></router-outlet> </main-content> </app> After loading a component through routing (changing the ...

Identifying when a system window covers an iframe

After watching a fascinating YouTube video (https://www.youtube.com/watch?v=TzPq5_kCfow), I became intrigued by how certain features demonstrated in the video could be implemented using JavaScript. One specific question that arose for me was how one can d ...

Using JavaScript, create a function that accepts an HTML element as a parameter

I have a script with two functions. One function generates a lengthy HTML string, and the other function processes this string as a parameter. function myFirstFunction() { // Generate HTML content return myHTML; } var myHTML = myFirstFunction(); ...

Elevated Drawer Navigation Menu Switch pushes content down to reveal active links

I am currently facing challenges in creating a top drawer navigation menu for a mobile device. My inspiration is the navigation menu utilized in the Google+ iPhone application. When the menu is clicked on, my goal is to have it slide down and push the con ...

Expand the object by clicking on it, causing the surrounding objects to move outside the viewport instead of appearing below

I'm facing a challenge with 3 squares inside one container, each occupying 33.33% of the viewport and placed next to each other. When I click on one square, it should expand to full viewport width and reveal hidden content, while the other two remain ...

Angular and HTML calendar picker

Is there a way to display a date in an HTML input type="date based on a variable stored in my ts file? The variable ScreenDate is defined in my ts file. <input type="date" [(ngModel)]="ScreenDate"> I tried the above code but it did not work as exp ...