How can I fill the space around a centrally aligned div?

I'm looking to create a centered div with additional divs or spans on each side to fill the empty space.

Currently, I am using margining to center the div and you can see the implementation in this example.

HTML Code:

<div id='A>
  <div id='Ad'>
  </div>
</div>

CSS Styling:

#A{
  z-index: 3000;
  position: fixed;
  width: 100%;
  height:  40px;
  background: rgba(0,0,0,0.05);
}

/*
Left or right side container
*/

/*
Centered div
*/
#Ad{
  z-index: 3000;
  width:  400px;
  height:  40px;
  margin-left:  auto;
  margin-right:  auto;
  border-left: solid 1px #ff0000;
  border-right: solid 1px #ff0000;
}

/*
Additional container for left or right side
*/

My goal is to have one div always filling up the remaining empty space on the left, and another div doing the same on the right.

Clarification:

The central column should maintain a constant width, while the left and right columns adjust based on the window size.

csslayouthtmlmultiple-columns

Answer №1

If you're looking to create a layout with a fixed width central div and left/right columns that fill up the remaining space, this solution may be perfect for you:

HTML:

<div id="A">
    <div id="Ad">Centre</div>
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

CSS:

#A {
    z-index: 3000;
    position: fixed;
    width: 100%;
    height: 400px;
    background: rgba(0, 0, 0, 0.05);
}
/*
centered div
*/
 #Ad {
    z-index: 3000;
    width: 400px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border-left: solid 1px #ff0000;
    border-right: solid 1px #ff0000;
}
#left, #right {
    position:absolute;
    left:0;
    top:0;
    right:50%;
    margin-right:200px;
    background:#F00;
    height: 400px;
}
#right {
    left:50%;
    right:0;
    margin-left:200px;
    margin-right:0;
}

The trick here is to set the margin on the left/right columns to half of the central column's total width, accounting for any borders or padding.

See it in action here: http://jsfiddle.net/2AztF/

Answer №2

To create a responsive layout, I recommend using three <div> elements floated within the main container.

HTML:

<div id='MainContainer'>
  <div id='LeftSection'></div>
  <div id='CenterSection'></div>
  <div id='RightSection'></div>
</div>

CSS:

#MainContainer { overflow:auto }
#LeftSection { float:left; width:25%; }
#CenterSection { float:left; width:50%; }
#RightSection { float:left; width:25%; }

An example of this layout can be found on this jsfiddle link.

Answer №3

Create 3 separate divs:

<div id="X"></div>
<div id="Y"></div>
<div id="Z"></div>
<div style="clear:both"></div>

CSS: 

 #X,#Y,#Z{
    float:left;
    width:10%;
  } 
  #Y{
    width:80%;
  }

In this example, Y is the main div. It's recommended to include a clear property when using floats.

Answer №4

To utilize the space on both sides of your div element, ensure that there is no margin or padding present.

float:right; 
float:left;

HTML: 

<div class='wrapper'> 
<div class='left-side'></div> 
<div class='middle-section'></div>
<div class='right-side'></div> 
</div>

CSS:

.wrapper { overflow: hidden; margin:0; padding:0; }
.right-side { float: right; width: 150px; }
.middle-section{ float: right; width:50px; margin-right: 50px; }
.left-side{ float: left; width: 150px; }

The margin-right property of .middle-section will automatically adjust the spacing as needed.

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

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

javascripthtmljsonaws-lambdaaws-api-gateway

Is there a way to display these panels in a scrollable table layout?

My aim is to replicate this specific styling: https://i.stack.imgur.com/jz5lm.png This type of table shown above is being dynamically imported via Redux: class LocationList extends React.Component { componentDidMount() { this.props.fetchLocations( ...

javascripthtmlcssreactjsflexbox

What are the steps to change table characteristics?

I currently have this segment of HTML code: <table cellspacing="0" cellpadding="0" width="100%"> After validating my HTML document, I discovered that these attributes are outdated. However, removing them would affect the alignment of my website. I ...

htmlcssw3c-validation

The autocomplete feature in Google Maps is not functioning properly when used within a modal

I've integrated the Google Maps API to enable autocomplete address functionality for an input box on my page. However, I'm encountering an issue where everything works fine on the page itself, but it doesn't work when the input box is placed ...

javascripthtmlangularjsgoogle-maps

Utilizing ng-click within ng-repeat along with $index

I'm experimenting with using ng-click on a div that is part of an ng-repeat loop, utilizing $index as seen in the code below : HTML: <div class="elementContainer" ng-repeat="element in elements" ng-click="elementUrl($index)"> <h2>{{ ...

htmlangularjsindexingangularjs-ng-repeatangularjs-ng-click

Using CSS to disable an image map in conjunction with dynamically adjusting CSS styling

On the desktop version of the website, there is an imagemap implemented. However, when the site transitions into tablet or mobile view, the imagemap should be disabled to allow for a simpler navigation area to be displayed. I attempted to use the following ...

htmlcssdynamicimagemap

Ways to eliminate models that are not currently connected to the DOM

Within my form, I have implemented logic using ng-if to determine which elements are displayed based on user selections. For instance, if a user selects USA as the country, the state drop down will be shown as it was conditioned upon an ng-if for the count ...

javascripthtmldomangularjs

Running a Python Selenium script

I need some help executing this script using selenium. <div class="vbseo_liked"> <a href="http://www.jamiiforums.com/member.php?u=8355" rel="nofollow">Nyaralego</a> , <a href="http://www.jamiiforums.com/member.php?u=8870" rel="nofollo ...

javascriptpythonhtmlseleniumweb-scraping

Incorporate JavaScript values into an HTML form to submit them to PHP

How can I successfully POST the values of 'vkey' and 'gene+varient' when submitting a form in HTML? The values are retrieved using JS code and displayed correctly on the form, but are not being sent upon submission. <form action="ac ...

javascriptphphtml

Is there a way to access and modify files stored locally through a webpage using HTML?

My team uses a specific application and I need to access a local log that they generate. The goal is to transfer this log to a central system for tracking their activities. To accomplish this, I plan to create a background web application or webpage that a ...

javascriptjqueryhtmlajaxclient-side-scripting

What is the proper way to link an image in a nuxt project?

I am working on a modal in the app.html file of my Nuxt project that prompts Internet Explorer users to switch to another browser. The modal includes links to three different browsers for download. Although the modal is displaying correctly, I keep encount ...

javascripthtmlvue.jsnuxt.jsassets

The issue of bootstrap-multiselect being clipped under a kendo window has been causing

I am encountering an issue with my kendo window while using the bootstrap multiselect dropdownlist inside it. When I try to select something from the dropdown list, the dropdown-menu is getting clipped under the window and I cannot see all the options. Ev ...

csstwitter-bootstrap-3bootstrap-multiselectkendo-window

Ways to prevent body content from overlapping with footer content and appearing below

Currently, I am utilizing an autocomplete text box where the scroll bar exceeds based on dynamic values. However, if more values are displayed in the text box, the scroll bar automatically extends to exceed the footer of the page, resulting in two scroll b ...

jqueryhtmlcssautocompleteoverflow

Issues with JavaScript and CSS functionality not functioning correctly as expected

There seems to be an issue with the order of HTML elements in the following code. When I place the div with the class thumb-bar before the full-img div, the JavaScript functions correctly. However, if I switch their positions, the JavaScript functionalitie ...

javascripthtmlcss

Convert HTML form input into a JSON file for safekeeping

<div class="email"> <section class="subscribe"> <div class="subscribe-pitch"> </div> <form action="#" method="post" class="subscribe-form" id="emails_form"> <input type="email" class="subscribe-input" placeholder="Enter ema ...

javascriptjqueryhtmlcssjson

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

csssafaribackground-imagebackground-repeat

Issues with Jquery Div sliding transitions from right to left are not functioning correctly

Creating page transitions in jQuery similar to "http://support.microsoft.com/." Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) ...

javascriptjqueryhtmlcss

Tips for highlighting text in HTML without using a specific tag

My current project involves customizing a Wordpress plugin, but I've encountered a frustrating obstacle. I'm having trouble removing the three dots that appear at the bottom of the download card. Despite my efforts, I can't seem to find any ...

htmlcsscss-selectors

Issue with submit button functionality in Wicket when the value is empty

This is a custom class called YesNoPanel that extends the Panel class: public class YesNoPanel extends Panel { /** * */ private String password = "Password"; public String getPassword() { return password; } public void setPassword(String passwo ...

javahtmlwicket

HTML stops a paragraph when encountering a script within the code

Everything in my code is working correctly except for herb2 and herb3, which are not displaying or utilizing the randomizer. I am relatively new to coding and unsure of how to troubleshoot this issue. <!DOCTYPE html> <html> <body> ...

javascripthtml