organizing div class tiles in a vertical layout

I am facing a challenge in arranging the class named tile along with some additional elements to create a vertical list. The tiles vary in size and are not displaying vertically as intended. I also want to add text next to each tile without disrupting the alignment of the vertical list structure. The first tile contains a label "Overview" inside it, while for the rest, I wish to include text aligned to the right of the respective tiles.

<div id="sidebar-company">

  <a class="tileSB bg-darkBlue animated six flipInX" data-click="transform">
    <div class="brand">
      <div class="text-center">
        <p class="fg-white">Overview</p></div>
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated seven flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">

    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated eight flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated nine flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">
    </div>
  </a>

</div> <!-- End tile group -->

What would be the best way to achieve this using CSS?

htmlcssclass

Answer №1

You have two options:

Option 1: Display them as a block to take up a new line:

a.tileSB {
  display: block;
}

Option 2: Float and clear all the elements:

a.tileSB {
  float: left;
  clear: left;
}

Check out the demo in Stack Snippets below:

.tileSB {
  display: block;
}
<div id="sidebar-company">

  <a class="tileSB bg-darkBlue animated six flipInX" data-click="transform">
    <div class="brand">
      <div class="text-center">
        <p class="fg-white">Overview</p></div>
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated seven flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 2
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated eight flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 3
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated nine flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 4
    </div>
  </a>

</div> <!-- End tile group -->

Answer №2

Ensure all your anchor elements have the CSS property display:block

#sidebar-company a{
   display:block;
}

Block elements are displayed vertically by default as they occupy the entire available space.

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

Using CSS and JavaScript to create a gradient-style opacity effect for smoothly fading out content

Is there a way to achieve a gradient fade effect on the opacity of an iframe and its content? To provide an illustration, think of the bottom of the notification centre in Mountain Lion or iOS. The concept involves having the content within an iframe grad ...

cssiframescrollopacitygradient

What is the best way to ensure a table is responsive while maintaining a fixed header? This would involve the table scrolling when it reaches the maximum viewpoint, while also keeping

Can anyone help me create a responsive table with a fixed header that scrolls when it reaches the maximum viewpoint without scrolling the entire page? I've tried using box-sizing: border-box; and overflow-x:scroll; but it didn't work. Any suggest ...

javascripthtmlcss

"Duration parameter in jQuery animate() function not working as expected in Firefox

Just starting out with jQuery and I have a class for absolute centering (it's working as intended): .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #logo { background: url(logo.png) no-rep ...

jquerycssgoogle-chromefirefoxjquery-animate

What is the best way to include multiple tags (specifically for articles) in the Facebook Open Graph?

When it comes to a single blog or article with multiple tags, how can you add Facebook Open Graph data? This method seems like the most logical way to do it. However, the Facebook debugger reports that it's incorrect: <meta property = "article: ...

htmlfacebook-opengraphrdfa

struggling to remove the jquery DataTable

I am trying to implement a functionality where a Button, when clicked, clears a data table and reloads it with fresh data. However, I am facing an issue where the data table is not getting cleared upon clicking the button. Below is the code snippet that I ...

jqueryhtmldatatables

What is the reasoning behind the repetitive use of @media (max-width: 767px) in the Twitter Bootstrap

Why is the media query @media (max-width: 767px) repeated in the bootstrap-responsive.css file? To find out, you can view the file by visiting ...

csstwitter-bootstrap

What method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named ...

htmlcssiframe

Utilizing CSS to target the ID of an anchor element

I am a beginner in the world of HTML and CSS. I recently attempted to target an element using an id selector in my CSS code, but unfortunately, it did not work as expected. Can someone shed some light on why this might be happening? <!DOCTYPE html> ...

htmlcsscss-selectors

Avoiding the use of a particular URL when using this.router.navigate() in AngularJs

In my angularJS registration form, I am using a bootstrap template for the design. The URL path to access the form page is http://localhost:4200/signup <form method="post" (submit)='register(username.value,email.value,password.value)'> ...

htmlcssangularjsbootstrap-4

Having trouble transferring a file using html and php?

Currently, I am attempting to transfer a file from one directory to another using PHP. However, I am encountering an issue where every time I select the file to upload and press submit, it redirects me to a page that saves my .php file instead of the inten ...

phphtmluploadmove

Deactivate the button once the form has been submitted

Seems like a simple and common question, right? I also thought so. How can I achieve this in angularJS? CSHTML @using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { <div class="container" ng-ap ...

htmlangularjsasp.net-mvc

Feasible: Embedding my complete website using custom HTML code into an iframe

I have the HTML for a website saved in a JavaScript string and I want to display it within an iframe. How can I insert this HTML string into the iframe and make the website appear? I have attempted to use this.src = HTML_STR; this.innerHTML = HTML_STR; but ...

javascripthtmlcssiframe

Generate a link that can easily be shared after the content has loaded using

One feature on my website involves a content container that displays different information based on which list item is clicked (such as news, videos, blogs, etc.). This functionality is achieved by using jQuery's load method to bring in html snippets ...

javascriptphpjqueryhtmlajax

Add() function is not duplicating the formatting

I'm attempting to replicate the content below inside a DIV. <ul class="pie-legend"><li><span style="background-color:#0066CC"></span>10-0-1</li><li><span style="background-color:#33CC33&q ...

javascriptjqueryhtmlcss

Issues with inconsistent behavior of the select option in a form

Having some trouble with my form code. When I checked the web page, there seems to be an extra element that shouldn't be there. You can view the webpage https://i.sstatic.net/pu4ef.jpg. Inspecting it in browser developer mode, I found this extra eleme ...

htmlcss

using a CSS tag to vertically center text within an element

After using a tag and setting the background color, height, and width for my content, I decided to align the text in the center along the x-axis using text-align: center;. However, I am now trying to figure out how to align it in the middle along the y-ax ...

csshtmltags

Tips for positioning a JQuery drop-down correctly

Although I am not well-versed in JQuery and struggle with CSS, I often find myself working with both. Currently, I have encountered a problem: The jquery script I am using involves clicking on an image to reveal a login box that drops down using slideTogg ...

jqueryhtmlcss

Tips on adjusting CSS code to ensure that a single accordion panel is open when the page first loads

I have a code that is functioning perfectly. However, I need to make a modification so that there is a default panel open when the page loads or refreshes. #acc-label { display: block; float: left; height: 330px; width: 50px; margin-bottom: 10px ...

htmlcssaccordion

Is there a way to showcase the outcome of a Python script on an HTML webpage?

Hey there, I'm a beginner to coding and I've been working on a little project to track the price of gold in a web application using Flask and Python. In my HTML code, I have a button that, when clicked, takes users to a new route where the gold ...

pythoncssflask

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...

javascriptjqueryhtmlcsstwitter-bootstrap-3