Is the width set to fill the entire partial screen?

I'm facing a dilemma: I want the darkest-gray bar at the bottom right (visible after running the code below) to stretch as far as the browser window allows without encroaching on the light-gray section on the left. Here's the code snippet:

<div class="timeline-section">
    <div class="timeline-wrapper">
       <div class="mini-timline"></div>
       <div class="timeline"></div>
       <div class="clearfix"></div>
    </div>
</div>

CSS:

.clearfix { clear: both; }

.timeline-wrapper { position: relative; }

.timeline-section {
    background: #3d3d3d;
    bottom: 0px;
    height: 276px;
    left: 0px;
    width: 100%;
    position: absolute;
    padding: 0px;}

.mini-timline {
    background: #474747;
    margin: 0px;
    float: left;
    height: 276px;
    width: 500px;
    display: inline-block;}

.timeline {
    background: #232323;
    height: 200px;
    width: 60%;
    float: left;
    display: inline-block;
    position: relative;}

Answer №1

To prevent the timeline element from floating, try setting a margin-left equal to the width of the mini-timeline:

.timeline {
    background: #232323;
    height: 200px;
    margin-left:500px;
    position: relative;
    color:#FFF;
}

http://jsfiddle.net/rLzAM/1/

Answer №2

Consider the following approach:

.tracker {
    background-color: #2c2c2c;
    height: 250px;
    width: 90%;
    display: inline-block;
    position: fixed;
}

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

Give a sidebar within a grid layout a sticky position

As I work on coding a website layout, I have utilized a grid template. My goal is to make the header and left sidebar sticky. I have successfully achieved this for the header, but unfortunately, the sidebar remains non-sticky. Despite researching solutions ...

What is causing the align content property to not function as expected in this situation?

Is it expected for the flex items of the .center-section-container to be closer together when using this property? They do not seem to be affected at all. I have applied flex wrap so the items are now in different lines but too far away from each other, I ...

I am trying to center align this image, but for some reason, it's not cooperating

Attempting to center the image using margin-left: auto and margin-right: auto properties in the code snippet above has proven unsuccessful. The image is not aligning as desired. What could be causing this issue with the code? Are there any other techniq ...

The flex-basis property seems to be malfunctioning as the image suddenly vanishes when

While my question may seem similar to others, the issue at hand is actually quite different. Here's how it appears in Chrome https://i.sstatic.net/tngvr.jpg Safari https://i.sstatic.net/eE74k.png In Safari, you'll notice that the map disappear ...

Steps to remove a scrollbar from a fullscreen slider

Can anyone provide code examples on how to disable the scroll bar on a full screen slider? I want to have a scroll down button on each slider that, when clicked, will show the scrollbar only below the slider. I don't want the scrollbar to be visible ...

Is there a way to include text beneath the navigation bar and other elements on the page?

I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout. <style> div { float: left; } .pro { width : 100px; color : blue; } </style> <span> <div class="pro">Long property name : </div> <div>value&l ...

Creating Spinning Text Effects in Internet Explorer with CSS

Inside a list item (<li>), I have some text that I want to rotate 270 degrees. Direct methods in FireFox, Safari, Chrome, and Opera work fine for this, but when it comes to IE, there is no direct support. I've tried using filters like matrix and ...

Trouble with jQuery: Background color fade in/fade out effects not functioning

Issue with changing background color during FadeIn and FadeOut effect. Whenever I click on the "whatup" link, my button should blink with alternating red and white colors. Below is the HTML code: <a id="blkwhatsup" href="#" >whatup</a> <in ...

Differences between -webkit- and -moz-transition

My website uses CSS3 transitions and I have noticed that the -webkit- prefix works, but the -moz- prefix does not seem to be working. This is the CSS code I am using: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transit ...

The following divs are adjacent to each other, with their widths set in percentages, and the paddings

I successfully transformed divs into a column of tables. However, now I am looking to add some padding between the divs. When I attempt to do so like this: <div style="float:left; width:100%;"> <?php foreach ($datas as $rec) { ?> <div ...

What are some ways to create a responsive Grid in React JS with the help of Bootstrap?

Utilizing bootstrap in my react js project, I am implementing css grid to showcase some cards. However, I am encountering responsiveness issues. import React from "react"; import "./Project.css"; export const Project = () => { return ( <div& ...

What are the best methods for placing content within a box and ensuring it is responsive?

Having trouble solving a simple problem that seems to have an easy solution. The code I'm working on is meant to display multiple bubbles with similar content, but the text gets distorted due to using strange margin values to fit a specific resolution ...

What is the functionality of Google Chrome's "New Tab" iframes?

Have you ever wondered about those 8 small iframes displaying your most visited websites? How do they capture snapshots of the websites? How are the websites chosen for display? And most importantly, how do they actually work? Edit: I want to learn how to ...

Overriding makeStyles CSS in Material UI Styling

When creating classes using makeStyles and useClasses, I've noticed that MUI CSS tends to take precedence over my custom styles unless I use the '!important' rule. Is there a way to override MUI styles without having to rely on '!import ...

Text being enveloped in a span tag

Currently, I have a table displaying a list of users with their corresponding roles. However, the roles column is sometimes wrapping before reaching the end of the line. The user list data looks like this: $scope.userList = [{ "id": 1, "name":"AB ...

SQL Query: Change text color based on the result number retrieved

After executing my SQL SELECT statement, I want to display every record in a div using a While statement. I would like the divs to alternate in color, for example: Result 1 = white div Result 2 = grey div Result 3 = white div Result 4 = grey div. I am un ...

`Carousel nested within tabbed interface`

I am currently facing an issue with my website's tabs and carousels. I have 4 tabs, each containing a carousel, but only the carousel in the first tab seems to be working properly. When I activate the second tab, all the carousel divs collapse. For r ...

Ways to showcase flair in PHP code such as this

I currently have this code snippet: <h2 class="index-single">Tech Categories</h2><?php $args2 = array( 'cat' => 11 , 'posts_per_page' => 9 , 'paged' => $paged ); $the_query2 = new WP_Query( $args2 ); ...

What is the best way to display a collection of square Views in a FlatList in a react native application?

How can you create a scrollable square grid with two columns of squares in a FlatList using react-native and ensure it is responsive to different screen sizes? Which CSS properties in react-native are necessary to achieve square shapes for each <Item/& ...