Column that hovers in place within a set row using HTML and CSS

I have a webpage that consists of various elements, each one being a row with a fixed height. In each row, the content block should occupy only a portion of the row. This could mean taking up the entire row, the left side, right side, or somewhere in between.

To achieve this using HTML, I am considering using two buffer divs (one for the left side and one for the right side of the content). The width of these buffers will be determined programmatically (using Angular) and does not need to be set in CSS. It can simply be hardcoded in the PLNKR with inline styles.

Here is my initial plnkr.

I previously asked a similar question here, where I only needed three variations for rows (left half, right half, full width). Now, I require more flexibility.

<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me full width</p>
   </div>
   <div class="right-buffer"></div>
</div>
<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me floating left</p>
   </div>
   <div class="right-buffer"></div>
</div>
<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me floating right</p>
   </div>
   <div class="right-buffer"></div>
</div>
<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me in the middle</p>
   </div>
   <div class="right-buffer"></div>
</div>

The output will resemble the image below, but apart from floating either left or right, the element can also float in the middle.

https://i.sstatic.net/9xU7C.png

htmlcsstwitter-bootstrapalignmentcss-float

Answer №1

Utilized floats to align content right / left and margin:auto for centering the div:

.left{
  float: left;
  width: 33.33%;
}
.right{
  float: right;
  width: 33.33%;
}
.center{
  margin: auto;
  width: 33.33%;
}
.right-buffer {
  clear:both;  
}

(Included borders / padding for visual representation)

/* Custom CSS styling */

.employee-container {
  margin-bottom: 6px;
  margin-top: 6px;
  border: 1px solid lightsteelblue;
}
.employee-container > div.content {
  padding: 15px;
  background-color: lightsteelblue;
}
.left{
  float: left;
  width: 33.33%;
}
.right{
  float: right;
  width: 33.33%;
}
.center{
  margin: auto;
  width: 33.33%;
}
.right-buffer {
  clear:both;  
}
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content">
            <p>Show me full width</p>
          </div>
          <div class="right-buffer"></div>
        </div>
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content left">
            <p>Show me floating left</p>
          </div>
          <div class="right-buffer"></div>
        </div>
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content right">
            <p>Show me floating right</p>
          </div>
          <div class="right-buffer"></div>
        </div>
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content center">
            <p>Show me in the middle</p>
          </div>
          <div class="right-buffer"></div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer №2

I have carefully reviewed your request and created a solution using flexbox in Plunker.

Click here to view the solution on Plunker

 <style>
      .flex{display:flex;}
      .flex > *{flex:1;padding:2px}
 </style>

<body>
    <h1>Hello Plunker!</h1>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
      <div class="employee-container">
        <div class="left-buffer"></div>
      <div class="content">
        <p>Display full width content</p>
      </div>
      <div class="right-buffer"></div>
    </div>
    <div class="flex">
    <div class="employee-container">
      <div class="left-buffer"></div>
      <div class="content">
        <p>Align content to the left with large text that automatically adjusts</p>   
      </div>
      <div class="right-buffer"></div>
    </div>
    <div class="employee-container">
      <div class="left-buffer"></div>
      <div class="content">
        <p>Float content to the right</p>
      </div>
      <div class="right-buffer"></div>
    </div>
    <div class="employee-container">
      <div class="left-buffer"></div>
      <div class="content">
        <p>Center small text in the middle</p>
      </div>
      <div class="right-buffer"></div>
    </div>        
    </div>
        </div>
      </div>
    </div>

  </body>

Answer №3

Here is the code snippet along with a Plunker link that could be helpful -

Direct Link to Plunker

Snippet of HTML Code

<body>
    <h1>Hello Plunker!</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="employee-container">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me full width</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="employee-container leftDiv">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me floating left</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="employee-container rightDiv">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me floating right</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 centeredDiv">
                        <div class="employee-container">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me in the middle</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Snippet of CSS Code

.employee-container {
      margin-bottom: 6px;
      margin-top: 6px;
    }
    .employee-container > div {
      padding: 3px;
      background-color: lightsteelblue;
    }
    .centeredDiv{
      position:relative;
    }

    .centeredDiv > .employee-container{
      position:absolute;
      width:50%;
      left:25%;
    }

    .rightDiv{
      width:50%;
      float:right;
    }

    .leftDiv{
      width:50%;
      float:left;
    }

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

Problem with fetching Grails

I have a table nested within an anchor tag. The table is centered on the page, with each row containing an image. When the page loads, I noticed the following: a) The table initially appears at the top-left corner of the screen. b) As there are multiple v ...

javascripthtmlcssgrails

How to emphasize a portion of an expression in AngularJS using bold formatting

I have a specific goal in mind: to emphasize part of an angular expression by making it bold. To achieve this, I am working with an object obj which needs to be converted into a string str. obj = $scope.gridOptions1.api.getFilterModel(); for (var pr ...

javascripthtmlangularjsangularjs-scope

Updating comment content using Ajax

I am in the process of using Ajax to insert my comment content. However, I seem to be facing some issues with the comment_add.php page. I was hoping someone could review it for me. While I have successfully obtained the streamid as checked in firebug, no ...

phpjavascriptjqueryhtmlajax

`How can the background color be altered based on specific conditions?`

I am attempting to modify the background color. My goal is to change every odd result to a light green (#f0f5f5) to avoid a large white space when the result ends in an even number. I would also like to change the background color of the pagination section ...

javascripthtmlcss

Exploring the application of AJAX value within inline HTML using JINJA

My flask server responds to an AJAX call with data, which I then display dynamically in my html using the ids of the elements. Now, I want to take it a step further and change the color of the html component based on the value returned. I attempted to us ...

htmlajaxflaskjinja2

Save room for text that shows up on its own

I am currently dealing with a situation where text appears conditionally and when it does, it causes the rest of the page to be pushed down. Does anyone know the best way to reserve the space for this text even when it's not visible so that I can pre ...

javascriptcssvue.js

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

javascripthtmljquerycssscss-mixins

"Selecting an element through Drag/Drop will result in the element being

INQUIRY I've encountered an issue with a draggable element ($("#draggable")) that interacts with a checkbox ($('#checkable')). When the $('#draggable') is dragged onto a box ($('#droppable')), it checks $(&apos ...

javascriptjqueryhtmljquery-uidrag-and-drop

Using jQuery to transfer the selected value from one radio button to another

I am attempting to transfer all input data from one div to another div containing the same inputs, triggered by a checkbox selection. This is the structure of my HTML Form: <div id="0">Name* <input type="textbox" name="name0" required/>S ...

javascriptjqueryhtml

Guide to inserting .json data into a .js file

Currently, I have an HTML5 banner designed using Flash CC. However, the platform in which I am showcasing this ad does not support JSON files. I am looking for a way to transfer the information from the JSON file into either my .html or .js file so that ...

javascriptjsonhtml

Tips for showing two divs alongside p tags in a single row

Is there a way to align two divs side by side on the same line, despite both having p tags and one containing an image that is necessary? I appreciate any workaround suggestions. Thank you! Here is the code snippet: HTML <div class="MainMenu"> ...

csshtmlimage

Looking for the xpath or css required for the given HTML snippet

In the following HTML code, a pop-up is generated to add a product. I am looking for an XPath or CSS selector that works in Selenium and allows me to click on the "add" button to add a new product. I have tried using the XPath //div[18]/div[2]/div/button, ...

cssxpathselenium

Is it possible to dynamically alter the color of a span text over a specific period of time?

Within my span tag, I am displaying text dynamically over a specific duration by reading a webvtt file. However, I want to change the color of the text during this given duration. I attempted to achieve this using CSS with transitions and passing the dura ...

javascriptcssvue.js

JavaScript is causing a performance problem when attempting to hide the header while scrolling

In my attempt to create a navigation bar, I have specific requirements: It should start with a large height Disappear when scrolled down Show a smaller version when scrolling back up Expand to full height when fully scrolled to the top I have managed to ...

javascriptjqueryhtmlcssperformance

What could be preventing my HTML replacement assignment from functioning properly?

Whenever a choice is made, I want to substitute the current content with different content. My current attempt is to update the content from "HuckFinn" to "Tom Sawyer will be added later" when the user selects "Tom Sawyer" from the drop-down menu. However, ...

jqueryhtmlvisual-studio-2013asp.net-webpages

Align the bottom of the Material UI icon with the bottom of the text

Below is the code snippet that I am working with: <td> <WarningAmberIcon sx={{ color: '#cc0000' }} />&nbsp;&nbsp; If you cannot print in colour, please <a href="https://www.aviva.ie/insurance/car-insurance/faqs/#do ...

htmlcssreactjsmaterial-ui

Dynamic menu causing interference with other elements of the code

When the width reaches a maximum of 37.em, the navigation styled under a hamburger menu automatically opens. I would prefer it to remain closed rather than open when scaled to that size. It also allows the underlying menu underneath it (div.gallery with cl ...

javascripthtmlcss

Utilize the href attribute on an image, whether it be through a class

I work as a designer and I'm looking to extract the same href link from class="kt-testimonial-title", either in id="slick-slide10", or in class="kt-testimonial-item-wrap kt-testimonial-item-0", or in class="kt-testimonial-image". Can this be achieved ...

javascripthtmljquerywordpress

Utilize Google Console with Chrome and jQuery to extract the name and URL from HTML content

I am trying to parse the HTML source code in order to extract all links and text from it, and then store this information in a multidimensional array, all within the Google Chrome console. Here's a snippet of the code that needs to be repeated 10 tim ...

javascripthtml

Modify the HTML indentation style in Visual Studio 2008

When working with Visual Studio 2008, I have noticed that it insists on indenting HTML in a specific way: <h1> title</h1> <h2> subtitle</h2> However, I personally prefer the following indentation style: <h1>title< ...

htmlvisual-studiovisual-studio-2008indentation