When employing DIV instead of TABLE, the issue arises where the width of the DIV does not completely occupy

<div style="width:100%;">
<div style="background-image:url('../images/navi/top-red.png'); float:left;"></div>
<div style="width:180px; float:left"><img src="/images/navi/logo.jpg" style="width:178px; height:62px; float:right; border:0;" /></a></div>
<div style="width:800px; float:left; background-image:url('../images/navi/top-black.png');"><ul id="topnav" style="">NAVI LINKS</ul></div>
<div style="background-image:url('../images/navi/top-black.png');float:left;"></div>
</div>

The main goal is to create a full-width top navigation menu for my website:

--------------------------------- 100% browser width -----------------------------

|top-red.png FLUID | width:180px-LOGO.jpg | width:800px-NAVI LINKS | top-black.png FLUID|

--------------------------------- 100% browser width -----------------------------

Key points:

  • Center content fixed at 980px width
  • Center content includes logo image and navigation links
  • Left space filled with top-red.png background image
  • Right space filled with top-black.png background image

I initially tried using div tags, but encountered issues with filling the available space. I resorted to using a table instead:

<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
  <tr>
    <td style="background-image:url('../images/navi/top-red.png'); height:62px;">&nbsp;</td>
    <td style="height:62px; width:180px; padding-right:10px;"><a href="/"><img src="/images/navi/logo.jpg" alt="LOGO IMAGE" style="width:178px; height:62px; border:0;" /></a></td>
    <td style="height:62px; width:800px; background-image:url('../images/navi/top-black.png')">NAVIGATION MENU</td>
    <td style="background-image:url('../images/navi/top-black.png'); height:62px;">&nbsp;</td>
  </tr>
</table>
htmlcsshtml-tablebackground-image

Answer №1

Here is my approach: I utilized a .container element to create a 980px centered section, incorporating the :before and :after pseudo-elements for the fluid parts with absolute positioning. Additionally, CSS3 gradients were used instead of background images (the gradient code has been omitted here for brevity).

Check out the demo on JSFiddle

HTML

<header>
    <div class="container">
        <div class="navbar"> 
            <a href="#" id="brand">
                <img id="logo" src ="http://placehold.it/180x50"/>
            </a>
            <ul class="nav">
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
        </div>
    </div>
</header>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
.container {
    width: 980px;
    margin: 0 auto;
    height: 62px;
    position: relative;
}
.container:before, .container:after {
    content:'';
    display: block;
    position: absolute;
    width: 9999px; /* a large number to fill remaining space*/
    height: 62px;
    top: 0;
}
.container:after {
    left: 100%;
    background-color: #000000;
    /* + black gradient background*/
}
.container:before {
    right: 100%;
    background-color: #AF0B00;
    /* + red gradient background*/
}
#brand {
    height: 100%;
    line-height: 62px;
    float: left;
    font-size: 0;
    width: 180px;
    text-align: center;
    padding-right: 10px;
    vertical-align: top;
    right: 100%;
    background-color: #AF0B00;
    /* + red gradient background*/
}
#logo {
    vertical-align: middle;
}
.navbar .nav:before {
    display: inline-block;
    content:'';
    height: 62px;
    width: 10px;
    background: #fff;
}
.navbar .nav {
    list-style:none;
    padding: 0;
    margin: 0;
    float: left;
    width: 790px;/*800-10 of logo padding*/
    height: 62px;
    background-color: #000000;
    /* + black gradient background*/
}
.navbar .nav li {
    list-style:none;
    display: inline-block;
    line-height: 62px;
    vertical-align: top;
}
.navbar .nav li a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;
    padding: 0 18px;
}

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

JavaScript and the importance of using commas in arrays

I am developing a system that displays text in a textarea when a checkbox is checked and removes the text when the checkbox is unchecked. The functionality is mostly working as intended, but I am facing an issue where commas remain in the textarea after un ...

javascripthtml

Executing a script on a different HTML page without the need to reload it

I'm currently working on incorporating a notification system inspired by Facebook's design. This system will feature an icon in the header that, when clicked, reveals a drop-down containing a table of sorted notifications for the user. My goal is ...

jqueryhtmlajaxfacebookperl

Utilize custom fonts from your local directory within a Vite Vue3 project

Inside my main.scss file, I am loading local fonts from the assets/styles/fonts folder: @font-face { font-family: 'Opensans-Bold'; font-style: normal; src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truety ...

cssvue.jsvuejs3vite

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help wou ...

javascriptjqueryhtmlcssjquery-ui

I am encountering an issue with the jquery.min.js file not loading when I try to utilize the Google CDN for jQuery

Currently in the process of learning about jQuery and testing its functionality, however, I am facing an issue where changes are not being reflected. The error message states that it is unable to load. I have confirmed that I am using Google CDN and also h ...

htmljquerycssvisual-web-developer

How can you make a Dropdown Box with Javascript?

My current table setup is as follows: <table> <tbody> <tr> <td>List 1</td> <td>List 2</td> <td>List 3</td> <td>....</td> </tr> <tr> <td>This section would be the dropdown ...

javascripthtml

Placing emphasis on a link's destination

Is there a way to automatically focus on an input field after clicking on a local href link? For example, I have the following: <a href="#bottom"> Sign up </a> And at the bottom of the page : <div id="bottom"> <input type="email" nam ...

htmlcssfocus

Rapache and R team up for dynamic leaflet design

I'm currently working on creating a webpage using Rapache and "Leaflet for R". My main goal is to integrate R into an html page using brew. However, I am facing difficulties in displaying my map within the html page without having to save it as an ext ...

htmlrleafletrasterrapache

Utilizing the data sent to a modal to enhance the functionality of the code by combining it with the src attribute of an <embed> element

I am trying to pass a dynamic string of data to a Bootstrap modal using the data-val attribute in an HTML table. <td <button type="button" class="btn btn-success btn-xs" data-val="<?php echo $row['order_id']; ?&g ...

phphtmljquerybootstrap-4concatenation

Node.js is able to read an HTML file, but it seems to have trouble locating and loading

Struggling to load a jQuery file or any file in a node.js read HTML document. After spending considerable time on this issue, I realized that the Google-hosted library file works fine but my local file does not. The problem seems to be related to directing ...

jqueryhtmlnode.js

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

htmlcssimage-resizingautoresizeshrink

Prevent lengthy headers from disrupting the flow of the list items

I've encountered an issue while working on a website that features a list of items. When the title, such as "roller blinds," spans across two lines, it disrupts the layout below. How can I prevent this from happening without compromising on having lon ...

htmlcsshtml-lists

Using CSS to Showcase Text and Images

Setting up a database for Weapons for Sale and incorporating PHP code: <?php echo '<link rel="stylesheet" href="display.css" type="text/css">'; function FindPhoto($name) { $dir_path = "http://www.chemicalzero.com/FireArms_Bis/Guns ...

phphtmlcss

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

javascriptjqueryhtmlcss

Exploring the world of jQuery sliders and dynamically updating div container content

Alright, here's what I have come up with so far: First, take a look at this website to see the idea I am trying to explain: What I am aiming for is this concept: A visitor goes to the provided website and wants to know what type of sandwich they can ...

javascriptjqueryhtml

Implement PHP script to send email upon form submission with POST method in HTML

I am new to PHP and trying to set up mail functionality, but I'm facing a problem where clicking on the submit button opens a new window that displays part of my PHP code. My goal is to send an email from a user's email address to mine with the c ...

phphtmlemail

The function element.innerHTML is invalid when trying to assign an object value as an option

Hey there! I'm currently working on a JavaScript project where I have an input that retrieves text from an array. Each option in the array needs to be linked to an object so I can utilize its attributes. const data = [ { name: "SIMPLES NACION ...

javascripthtmlcss

Adding a Unique Custom Menu Item in _tk Wordpress Theme: Incorporating a Button and Search Form

I am currently working on customizing the _tk theme for WordPress, and I have hit a roadblock when it comes to the Nav Menu functionality. Adding menu items from the WordPress admin page is easy for custom links and pages. However, I am looking to include ...

phpcsswordpresstwitter-bootstraphook

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

javascriptjquerycssscroll

Is there a way to identify if you are at the bottom row of a column defined by CSS styling?

I have implemented the new CSS-style column to divide a single unordered list into multiple columns. Now, I am trying to figure out how to target the last element in each column using JavaScript or CSS. Here is my HTML: <ul> <li /> <li ...

javascriptjquerycss