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

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle: display: inline-block; vertical-align: middle; content: " "; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid black; width: 0; height: 0; Click here ...

csscross-browsergeometrycss-shapes

The JavaScript code is not executing properly within the HTML document

I am trying to execute a function from my JavaScript file in my HTML page. Here is the code snippet: index.html <!DOCTYPE html> <html><body> <h2>Web1</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jq ...

javascriptjqueryhtml

Ways to heighten the `RadComboBox` `DropDownHeight` featuring `Templates`

One of the challenges I'm facing involves a RadComboBox setup like this: <telerik:RadComboBox ID="RadComboBoxNames" runat="server" Width="470px" DropDownAutoWidth="Enabled" MaxHeight="363px" Skin="MySkin" EmptyMessage="Select" High ...

cssasp.netvb.nettelerikradcombobox

Tips for transforming a JSON object (originated from jquery-css-parser) into properly formatted CSS code

Currently, we are utilizing a jQuery plugin in our project to convert CSS to a JSON object. The plugin can be found at the following link: Now, we have a requirement to convert the JSON object back to CSS in string format. Unfortunately, the plugin we ar ...

javascriptjquerycssjsonparsing

What is the best method for starting a string using the symbol '~'?

Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...

javascripthtmlcssstroke

Angular - Uploading Files

Within my $scope.accept function, I am attempting to upload some files to my server. The process works fine when using the tag in my HTML. However, I wish to prevent the page from redirecting and instead handle this with AJAX in my controller. When tryin ...

jqueryhtmlangularjsajaxionic-framework

Effectively replicating an HTML action in MVC ASP.NET

I am looking to replicate a basic function in HTML that is currently working for my needs, but now I need to implement the same functionality in MVC ASP.NET. Here is the original HTML code: <HTML> <HEAD> </HEAD> <BODY> ...

c#htmlasp.net-mvchttp-post

Ways to efficiently display elements in a grid in real-time

Attempting to design a layout where each row consists of 3 cards using Bootstrap's Grid layout for responsiveness. The challenge lies in the fact that the card data is stored in JSON format, and the length of the JSON Object array may vary, leading t ...

javascriptcssvue.jsgrid-layoutbootstrap-vue

What is the best way to vertically align the dropdown button with the other text boxes?

I'm currently utilizing a basic bootstrap template from getbootstrap.com. I am having trouble properly aligning the account type dropdown in this section. Additionally, the dropdown list items are not correctly aligned with the dropdown button. Any as ...

htmlcsstwitter-bootstrap

display a dual-column list using ngFor in Angular

I encountered a situation where I needed to display data from an object response in 2 columns. The catch is that the number of items in the data can vary, with odd and even numbers. To illustrate, let's assume I have 5 data items to display using 2 co ...

javascripthtmlcssangulartypescript

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1. Could this be a bug or am I overlooki ...

javascripthtmlcssbootstrap-4

Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyo ...

htmlcssangularbootstrap-4border

Utilize the assigned value of a variable from a separate file

Is it possible to set a variable in an external file called "Variable.js", assign it a value in a file named "Page1.html", and then use that variable with its assigned value in another file named "Page2.html"? For example, let's consider the contents ...

javascripthtml

What is the best way to showcase a full-screen overlay directly inside an iFrame?

As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below). What I want to achieve is creating a full-screen div overlay from that iFrame, but curr ...

htmlcssoverlay

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 i ...

javascripthtmlcss

What is the best way to swap out a div element with a text area when I press a button, all

I recently used a Fiddle found at http://jsfiddle.net/GeJkU/ function divClicked() { var divHtml = $(this).html(); var editableText = $("<textarea />"); editableText.val(divHtml); $(this).replaceWith(editableText) ...

javascripthtmljquery

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

javascripthtmlfunctioniterator

The problem arises when using `$state.go` as it does not properly transfer the value to `$stateParams`

Within componentA, I am using an angular code: $state.go('home', {selectedFilter: "no_filter"}); In componentB, I have the following code: if ($stateParams.selectedFilter === 'no_filter') However, I am encountering an issue where $s ...

javascripthtmlangularjs

Click here to view the latest Poll Results!

I have implemented AJAX to display poll results on the same page without requiring a refresh. An issue I am facing is that the poll section occupies about three times more space than the results. This causes an inconvenience for users who vote, as they ma ...

phphtmlajax

Alert Box Displays Variable Name Instead of Label Name in Form Validation - MM_validateForm()

Looking at the screenshot, you can see variable names such as "email_address", "email_message" and "email_subject". I would like these to be displayed as "Email", "Message" and "Subject" instead. The validation in this form is done using MM_validateForm() ...

phpjavascripthtmlwebforms