Styling Hacks: Mastering the Art of Aligning Four Divs

I have 4 different colored divs in my HTML and I want to maintain their appearance as they are (Each color represents a div, totaling 4 divs excluding the background color).

Currently, I am facing an issue with my jsFiddle example: HERE

The problem arises when I try to add another item <li> in my <ul>, resulting in overlapping CSS styles.

body {
    background-image:url('http://subtlepatterns.com/patterns/shattered.png');
    margin:0;
}
.chatBody {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background-color:#3c454f;
    border-top: 10px solid #7ac943;
}
#navlist li {
    display:inline;
    list-style-type:none;
    width:300px;
}
.avatarUser {
    height:80px;
    width:80px;
    background-color:yellow;
    float:left;
    margin-right:20px;
    margin-bottom:20px;
}
li > .frdImage {
    position:relative;
    /*margin-top:-25px;*/
    top:50%;
    float:left;
    margin-left:5px;
    border-radius:6px;
    border:solid 2px #aaa;
    height:80px;
    width:80px;
    background-color:yellow;
    margin-right:10px;
    margin-bottom:20px;
}
li > span.frdName {
    position:absolute;
    float:left;
    margin-top:10px;
    font-weight:bold;
    font-family:'Verdana', cursive;
    font-size:15px;
    color:white;
    margin-right:200px;
}
.active{
    width:300px;
}
.frdStatusIndicator{
    float:left;
    margin-top:40px;
    height:15px;
    width:15px;
    background-color:#7ac943;
    border-radius:10px;
}
.frdStatusName{
    float:left;
    margin-top:40px;
    border-radius:10px;
    font-family:'Verdana', cursive;
    font-size:15px;
    color:white;
    line-height:15px;
    padding-left:5px;
}

I would greatly appreciate any help on this matter. Thank you for your time!

csshtmlvertical-alignmentalignment

Answer №1

Could this be the answer in HTML?

<div class="chatBody">
    <div id="navlist">
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the second</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the third</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fourth</div>
                <div class="frdStatusIndicator offline"></div>
                <div class="frdStatusName">Offline</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fifth</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
    </div>
</div>

Here's a CSS snippet:

  body {
    background-color: #3c454f;
  }
  #navlist > div.tile {
      display: inline-block;
      width:300px;
      border: solid 1px red;
      position: relative;
  }
  .avatarUser {
      height:80px;
      width:80px;
      background-color:yellow;
      float:left;
      margin-right:20px;
      margin-bottom:20px;
  }
  div.tile > .frdImage {
      border-radius: 6px;
      border: solid 2px #aaa;
      height:80px;
      width:80px;
      background-color:yellow;
      display: inline-block;
  }
  div.tile > div.stuff > div.frdName {
      position:relative;
      display: inline-block;
      right: 0px;
      margin-top:10px;
      font-weight: bold;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      width: 200px;
  }
  .active{
      width:300px;
  }
  div.tile > div.stuff {
      position: relative;
      top: -2em;
      width: 208px;
      /* border: solid 1px green; */
      display: inline-block;
  }
  .frdStatusIndicator{
      position: relative;
      height:15px;
      width:15px;
      background-color: #7ac943;
      border-radius: 10px;
      display: inline-block;
  }
  .frdStatusName{
      position: relative;
      border-radius: 10px;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      line-height:15px;
      padding-left:5px;
      display: inline-block;
  }
  .offline {
      background-color: #FF0000;
  }
  .online {
      background-color: #00FF00;
  }
  .idle {
      background-color:  #FFFF00;
  }

If you need to visualize, check out this jsfiddle: http://jsfiddle.net/bbutler/TMgs5/1/

Answer №2

To prevent overlap, consider setting the width of this div in the list to a specific value such as 100px.

<div style="display:inline; float:left;width:100px">

Thank you for your attention. Sincerely, AB

Answer №3

To expand the size of your window on JSFiddle, simply adjust the dimensions.

Take a look at the jsfiddle provided below. You were heading in the right direction.

http://jsfiddle.net/TYZ64/4/

#navitem li
{
    display:inline-block;
}

I just made a slight modification to that section.

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

What are the steps to programmatically reset or unselect a Radio button in Angular?

Here is the code snippet for selecting product condition using radio buttons. When a user selects either "New" or "Used," the corresponding product category is fetched: <div> <h5><b>Condition</b></h5> ...

htmlcssangulartypescriptbootstrap-4

Adjusting the Size of an HTML Slideshow

While designing a homepage for my band, I encountered an issue when trying to integrate a slideshow element from an external source. The size of the slideshow is fixed at 600 x 300px and cannot be adjusted. Additionally, I found it challenging to position ...

javascriptjqueryhtmlcss

"Get rid of the arrow in Bootstrap's dropdown menu

I'm currently using a bootstrap template that features an accordion menu. However, I have come across a scenario on one section of the page where I do not require the items to expand and show additional text, therefore, I would like to remove the arro ...

htmlcssdrop-down-menubootstrap-5

The webpage is inaccessible only on mobile Safari, with an error message indicating a lack of internet

Initially, I do not possess an iPad, however, some clients have reported an unusual issue with one of my websites on the iPad. They are unable to access any page on the website, instead encountering a blank page with the error message: "Safari cannot open ...

javascriptphphtmlcssmobile-safari

jQuery issue: Inability of "Read More" span to reappear after clicking "Read Less"

Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...

javascriptjqueryhtmlcss

Customizing the scroll bar hue on Safari for Lion operating system (OS X 10.7)

In Lion, the new scrollbars in Safari change color based on the background color of the body element. Is there a way to manually control whether the scrollbar is dark or light? I am aware of webkit CSS options to style the scrollbar that existed before t ...

cssmacossafariosx-lion

Tips for eliminating excessive line breaks when incorporating a table tag into nl2br

In my dataset, I have content that consists of plain text, codes, and tables interchangeably. To keep the database optimized, I have limited the use of HTML tags by excluding pre tag for table and text, reserving it only for codes (spaces do not need to b ...

javascriptphphtmlnl2br

What is the technique for linking to a different WordPress PHP file using a href?

I have a question regarding working with WordPress. I am using Stacks, a blank theme to convert an HTML template to WordPress. I need to create a hyperlink or button on a landing page that redirects to another PHP file within my website directory (e.g., lo ...

phphtmlcsswordpresswordpress-theming

Show a loading screen or spinner while waiting for a response from a REST API using JavaScript

I am currently developing a chrome extension that interacts with an exposed REST Service to send and receive data. To improve the user experience, I want to display a loading indicator while waiting for a response from the API server. However, due to the a ...

javascripthtmlajaxgoogle-chrome-extension

Reposition HTML content using regular expressions

My objective is to locate a block of HTML that contains comments and relocate it after the header section. The comment itself remains constant, but the content within the block varies across different pages and needs to be replaced using Dreamweaver' ...

htmlregexcommentsdreamweaverregular-language

JavaScript prohibiting input prior to execution

Having trouble with executing this javascript before the user input, can anyone assist me in resolving this issue. I just want to create a simple html page with a textbox and a button. When the button is clicked, it should open a new window with a modifie ...

javascripthtmlurl

Is it within the realm of possibility for a user to access and peruse the contents of this

I have taken measures to protect the contents of "x.txt" on my server from being viewed by any users. Here is what I have done so far: Blocked direct access to the file using .htaccess Implemented an ajax request on one of my pages to retrieve and s ...

javascriptajaxhtml.htaccesssecurity

When I bind the submit event to my form, the form is automatically submitted using the default handler

This issue occurs in both IE and Firefox, but not in Chrome. Here is the form structure: <form id="enviaEmail" method="post"> <label for="nombre">Nombre</label> <input id="nombre" type="text" name="nom ...

javascriptjqueryhtmlajaxforms

Is there a way to customize the scrollbar color based on the user's preference?

Instead of hardcoding the scrollbar color to red, I want to change it based on a color variable provided by the user. I believe there are two possible solutions to this issue: Is it possible to assign a variable to line 15 instead of a specific color lik ...

htmlcsstypescriptvue.jssass

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

https://i.stack.imgur.com/q7tMT.png Upon selecting an option from a dropdown within a table row, I make a call to an API to fetch a list of strings into another dropdown field for that specific row. However, the entire column is being populated with that r ...

javascripthtmlangularjsdomparent-child

I am facing an issue where PHP is failing to detect the '<del>' tag in my index.view.php file, resulting in it being omitted from the generated HTML

I've been working on updating my PHP code in the index.view.php file to display a strike through the task description if completed is set to true. I came across a Laracasts tutorial on classes where the instructor used <strike></strike>, w ...

phphtml

fullPage.js with linear scroll

Is there a way to implement fullpage.JS without any transitions between slides? I attempted the following setup, but it didn't work as expected: $('#fullpage').fullpage({ licenseKey: 'XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX', ...

javascriptjqueryhtmlfullpage.js

The dropdown list box within the EditTemplate of a DataGrid does not utilize binding

I am struggling with binding the dropdownlist in the edit template of a grid view. I keep getting the error message "Additional information: DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'Type'." Below ...

htmlasp.net

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...

javascripthtmljquerycss

Narrowing the width of a line-broken <h1> heading

I have encountered a problem that can be best described with two images provided below. Let's focus on the relevant CSS snippet: h1 { display: inline-block; background-color: pink; } The first example shows an <h1> tag with a short ti ...

htmlcss