Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides. The text should be floated left for both the header and content. There must be a simple solution to this problem, but it seems to elude me.

  <div class="container">
  <div class="row">
    <section>
      <ul class="nav nav-wizard">
        <li class="active">
          <h5 class="header">
          Header
          </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
        </li>
        <li class="active">
          <h5 class="header">
            Header
          </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
        </li>
        <li class="active">
          <h5 class="header">
            Header
        </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
      </ul>
    </section>
  </div>
</div>

CSS

li {
  width: 190px;
}

ul.nav-wizard:before {
  position: absolute;
}

ul.nav-wizard li {
  position: relative;
  float: left;
  height: 60px;
  display: inline-block;
  text-align: center;
  padding: 0 20px 0 30px;
  margin: 8px;
  font-size: 16px;
  line-height: 46px;
}

ul.nav-wizard li a {
  color: #428bca;
  padding: 0;
}

ul.nav-wizard li a:hover {
  background-color: transparent;
}

li:last-child:before {
  border-left: 16px #6633cc;
}

li:last-child:after {
  position: absolute;
  display: block;
  border: 31px solid transparent;
  border-left: 16px solid #6633cc;
  border-right: 0;
  top: -1px;
  z-index: 10;
  content: '';
  right: -15px;
}

ul.nav-wizard li.active:nth-child(-n+2) {
  background: #6633cc;
}

.header {
  margin: 0 auto;
  font-weight: bold;
  float: left;
}

p {
  float: left;
}

.content {
  margin: -29px;
  position: relative;
}

ul.nav-wizard .active ~ li {
  color: #999999;
  background: #ddd;
}

ul.nav-wizard .active ~ li:after {
  border-left: 16px solid #ddd;
}

Current JSFIDDLE: https://jsfiddle.net/zfcm2y27/

htmlcss

Answer №1

Consider utilizing Flexbox. Below is a revised and functional version of your 'ul.nav-wizard li' selector. Hopefully, it will yield the desired results.

ul.nav-wizard li {
  position: relative;
  float: left;
  height: 60px;
  display: flex;
  text-align: center;
  padding: 0 20px 0 30px;
  margin: 8px;
  font-size: 16px;
  line-height: 46px;
  flex-direction: column;
}

Answer №2

Update the .content class in your js fiddle with the following code:

.content {
 position: absolute;
 margin-top: 60px;
 border: 1px solid blue; /* Updated border color */
 left: 0;
 width:100%;
}

Note :- To align text to the left, adjust the padding of ul.nav-wizard li from padding: 0 20px 0 30px; to padding: 0 20px 0 10px;

The red border is just for reference, you can remove it as per your design requirements. Hope this information helps!

Answer №3

I have crafted a demonstration for you. I have streamlined the element calls, adjusted positions, and eliminated some floats from your CSS file. Does this align with what you had in mind?

CSS

li {
  width: 190px;
  height: 60px;
  display: inline-block;
  margin: 8px;
  color: #999;
}

li:last-child {
  position: relative;
  background: #ddd;
}

li:last-child:after {
  content: '';
  top: -1px;
  right: -15px;
  position: absolute;
  border: 31px solid transparent;
  border-left: 16px solid #ddd;
  border-right: 0;
}

li.active:nth-child(-n+2) {
  background: #6633cc;
}

.header {
  padding: 0 20px 0 30px;
}

.content {
  text-align: left;
  padding: 15px;
}

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

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

javascriptjqueryhtml

Nested navigation in Bootstrap

I am currently working on creating a multilevel menu using Twitter Bootstrap. Check out the code here Below is the snippet of HTML code: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ...

csstwittertwitter-bootstrap

Overlapping Issue with Angular Bootstrap Dynamic Dropdown Menu

I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page. To tackle this problem, I started off by referring to the ex ...

htmlcssangularng-bootstrap

Adding a drop shadow effect to borders using CSS is a great way to

I created this unique button design using Figma and now I want to implement it in CSS. Upon closer inspection, you'll notice that I included a highlight with a white shadow on the border. However, when I try to replicate it using the following CSS c ...

htmlcssstylesshadow

Creating a text design that spans two lines using Scalable Vector Graphics (SVG

I am working with an SVG that displays strings pulled from an Array... {"label":"Here is an example of the string...", "value":4}, The text above is shown in an SVG element as... <text>Here is an example of the string...<text> I would like ...

javascriptjquerycsssvg

How to use CSS to dynamically adjust the maximum width of an overflow container based on its children's content

I have a container with an overflowing <div> that displays multiple <ul> <li> lists. Each list always contains the same number of bordered <li> items, resembling a table. However, there may be instances where a <ul> has only ...

csshtmlwidthoverflow

The list-image is nowhere to be found

Seeking assistance with my LI style CSS. Visit this link for reference I'm having trouble getting an image to float on the right side of my sidebar links, and my content is overlapping with the sidebar... .sidebar-menu ul { font : 14px font-fam ...

htmlcssxhtml

How can we link identical pages to distinct sets of data in the backend and ensure they operate effectively with their respective data?

I'm working on a project where I have a dynamic table on the front-end that gets its data from a MySQL database connected using PHP. Each row in the table has action buttons, with only a delete option for now. The styling is pretty basic as shown belo ...

phphtmlmysql

Effective ways to replace an image using JavaScript

I am currently working on implementing a show/hide function, but I am encountering an issue with swapping the image (bootstrap class). The show-hide function is functioning properly; however, I am struggling to determine which class is currently displayed. ...

javascriptjqueryhtmltwitter-bootstrap

Attempting to achieve a carousel animation using jQuery

Upon loading the page, only one character out of four is displayed. Two arrows are provided - one on the left and one on the right. Clicking on the left arrow causes the current character to fade out and the previous character to fade in. Clicking on the r ...

javascriptjqueryhtmlcss

What is the best way to ensure bidirectional text appears correctly when two conflicting languages are combined, ensuring explicit directionality is set?

As I work on localization implementation, I encounter an issue with the directionality of mixed characters on the page. The text content is stored in a json file and inserted into the DOM using a Vue.js template. While individual characters display corre ...

javascripthtmlvue.jslocalizationbidirectional

The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11. Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CS ...

htmlcssinternet-explorerflip

CSS compatibility across different browsers

Check out my jsFiddle for an example of an onHover event that changes the image. It's working perfectly in chrome, but not quite right in firefox. Any suggestions on how to fix it? Here's the jQuery function I'm using: $(document).ready(fu ...

javascriptjqueryhtmlcssfirefox

The process of deleting lines from an image using Javascript

If I have an image of a data-table and I want to eliminate all the grid lines (defined as continuous vertical or horizontal pixels), is there a way to achieve this using Javascript's image data manipulation? I envision looping through a 2D array conta ...

javascripthtmlimageimage-processinggetimagedata

Providing a user with a special discount tailored to their email address?

<script type="text/javascript"> function updatePrice() { var price = document.getElementById("product").value; var size_price = document.getElementById("size").value; var a=parseInt(price);//parsed type price var b=parseInt(size_price);//pa ...

javascripthtml

Obtaining select options in jQuery by utilizing the $(this) selector

Looking for a way to loop through and log each option available in a select dropdown box, but struggling with how to use $(this). This is the code I have so far: $('select').each(function(){ $(this).find('options').each(function() ...

jqueryhtml

The correct terminology for divs, spans, paragraphs, images, anchor tags, table rows, table data, unordered lists, list

Just wondering, I've noticed that every time I come across a page element '<###>[content]<###>' and want to learn how to manipulate it, I usually search for something like "how to do x with div" or "how to get y from div". I know ...

javascripthtml

There appears to be an issue with the functionality of the Bootstrap toggle tab

Currently, I am facing a toggle issue and having trouble pinpointing the root cause as there are no errors appearing in the console. The problem involves two tabs that can be toggled between - "pay" and "method". Initially, the default tab displayed is "pa ...

javascriptjqueryhtmltwitter-bootstraptoggle

problem with CSS negative margin

When trying to position the navbar inside a div with the class main using negative margins, it causes issues on small screens when clicking on the toggler icon. How can I address this problem without relying on negative margins? <link rel="stylesheet" ...

htmlcss

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...

css