What is the best way to present a specific row layout using HTML and CSS?

Can someone assist me in creating rows of links in html+css with a specific layout? The desired format should follow this structure:

(Psuedocode)

<body class="class_with_minmaxwidth_set_in_css">
    <div class="container">
      <div class="row">
        <div class="fixed_left_40px"></div>
        <div class="fluid_center_which_changes_with_window_size"></div>
        <div class="fixed_right_40px"></div>
      </div>
      ... repeat more row divs
    </div>
</body>

I have experimented with using different combinations of floats, positions, and displays for each of the three divs inside, but haven't been successful in finding the correct setup. Any assistance would be greatly appreciated!

htmlcss

Answer №1

Using the CSS property display: table is an excellent solution:</p>

<p><a href="http://jsfiddle.net/9AM6R/" rel="nofollow">Check out the DEMO here</a></p>

<pre><code><div class="wrapper">
    <div class="column">
        <div class="fixed">50px</div>
        <div class="fluid">fluid</div>
        <div class="fixed">50px</div>
    </div>
</div>

.wrapper {
    display: table;
    width: 100%;
}

.column {
    display: table-row;
}

.column div {
    display: table-cell;
}

.column div.fixed {
    width: 50px;
}

.column div.fluid {
   background: lightBlue;
}

Answer №2

To line up div elements horizontally, you can use the CSS property display: inline-block

<div class="row">
    <div class="fixed_left_40px"></div>
    <div class="fluid_center_which_changes_with_window_size"></div>
    <div class="fixed_right_40px"></div>
</div>

CSS:

.row div{
    display: inline-block;

    height: 40px;
}

.fixed_left_40px{
    width: 40px;    
    background: blue;
}

.fixed_right_40px{
    background: red;
    width: 40px;
}

View Working Example

Answer №3

.container section {
    display: flex;
}

.container .fixed_left_40px {
    float: left;
    width: 40px;
}

.container .fixed_right_40px {
    float: right;
    width: 40px;
}

check out this example on jsFiddle

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

How to correctly position a modal in a React application using CSS

Currently, I am working on integrating the react-modal NPM library into a React Typescript project. The issue I am facing is that the modal occupies the entire width of the screen by default, with padding included. My goal is to have it display as a small ...

cssreactjs

Adjust size of item within grid component in VueJS

I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images). https://i.stack.imgur.com/q4MKZ.png This is my current grid setup, and I would like the ...

javascripthtmlcssvue.jsgrid

Implementing the sticky positioning property to keep a div container fixed at the bottom of the page

As Bootstrap 4 no longer supports .affix, I had to look for an alternative solution to keep a box fixed. I needed a div container to remain fixed as you scroll to it. My current workaround is using: .fixedcard{ position: sticky; top:75%; } However, th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Polymer event / callback for appending new child nodes

My current project involves creating a custom element, let's call it <parent-element>, that performs specific actions based on the presence of its childNodes. When I define the element like this: <parent-element> <div> </div&g ...

javascripthtmlpolymerweb-componentmutation-observers

The <img> element is able to fill an entire div while maintaining its original aspect ratio

I am currently facing a challenge with implementing a responsive gallery slider in Bootstrap. In order to achieve responsiveness, I need to use properties like max-height. The issue arises from the fact that the images in the gallery can vary in size and ...

htmlcsstwitter-bootstrap

Is there a way to bring to life the addClass() and removeClass() jQuery functions through animation?

I am currently developing a website and I want to be able to toggle the visibility of sections by using the ".hidden" bootstrap class within click events. Here is the basic code snippet: $('selector').click(function(){ $('*part-to-hi ...

javascriptjqueryhtmltwitter-bootstrapanimation

Email replay feature

Having an issue with my email validation function. I found the code I'm using here: Repeat email in HTML Form not the same. Why? The problem I am facing is that if you incorrectly enter your email in the first input "eMail" and correctly in the seco ...

javascripthtmlemail

I'm attempting to render HTML emails in ReactJS

I have been attempting to display an HTML page in React JS, but I am not achieving the same appearance. Here is the code snippet I used in React JS: <div dangerouslySetInnerHTML={{ __html: data }}/> When executed in regular HTML, the page looks lik ...

javascripthtmlcssreactjs

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...

javascriptjquerycssreactjs

Dynamic Navbar that Adapts to Your Scroll

I'm experiencing an issue with my navbar. I want it to stay at the top of the page when I scroll, but whenever I apply the "position: fixed;" property, the navbar disappears. Below is my HTML and CSS code: <nav> <div class="navbar"> <b ...

htmlcss

Exploring the use of React material-ui Drawer list to render various components onClick in your application

Working on designing a Dashboard with the React material-ui package involves implementing an App bar and a Drawer containing a List of various items. The objective is to render the corresponding component inside the "main" tag of the Drawer upon clicking a ...

htmlreactjsreact-routermaterial-ui

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

javascripthtmlcss

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

htmlcss

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

javascriptjqueryhtml

Is there a way to adjust the placement of the h1 tag using the before pseudo-element?

I'm looking to place an image on the left side of each h1 tag. I've been attempting to utilize the before pseudo element for this task. The issue arises when there is no content, causing the before pseudo element to overlap with the h1 tag. How ...

htmlcss

Massive HTML Table Containing Rows upon Rows

Currently, I have a server that can provide me with a list of objects in json format, and my goal is to showcase them in a table on the client side. Initially, I thought about dynamically modifying the DOM after receiving data from the server. Building th ...

javascripthtmljsondom

Populating a Listview in jqueryMobile with dynamic elements

I am struggling with my listview. Whenever I try to add or remove items from the list, the jquery mobile styling does not get applied to the new content that is added. <ul data-role="listview" id="contributionList"> <li id="l1"><a>5. ...

javascripthtmljquery-mobile

position blocks next to each other within a container

Thank you for all the hard work! I've been struggling to figure out how to align blocks next to each other within a div. It may not be that difficult, but I just can't seem to find an elegant solution... Here is the HTML code snippet: <div ...

javascripthtmlcss

Creating dynamic transformations and animations for characters and words within a paragraph in 3D

Looking to add animation effects to specific parts of a paragraph, but transforming the entire box instead. Remembering seeing a solution on StackOverflow before, now regretting not saving it. Spent over an hour searching for a similar answer without succ ...

javascripthtmlcss

Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...

htmlcss