Both Fluid and Fixed layouts offer different advantages and disadvantages for website

Is there a way to position two divs side by side, where one div is 75% width and the other is 25% width? Additionally, can we place another div on top with margin:0 auto; to center the content of the page with a width of 986px?

Here is an example code snippet:

#bodywrapper
{
    margin:0 auto;
}
#green-portion
{
    background:url('images/green_portion.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:75%;
    position:absolute;
    top:30%;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1;
    display:none;
}
#blue-portion
{
    width:25%;
    background-color:#051f3b;
    height:400px;
    position:absolute;
    top:30%;
    bottom:0;
    left:75%;
    right:0;
    overflow:hidden;
    z-index:99999;
}

<div id="bodywrapper">

<div id="green-portion">
</div>

<div id="blue-portion">
</div>

</div>

Answer №1

#wrapper {
    margin: 0 auto;
}

#red-block {
    background: #FF0000;
    width: 50%;
    height: 300px;
    top: 20%;
    float: left;
}

#yellow-block {
    background-color: #FFFF00;
    width: 50%;
    height: 300px;
    top: 20%;
    float: right;
}

<div id="wrapper">
  <div id="red-block"></div>
  <div id="yellow-block"></div>  
</div>

Answer №2

Styling with CSS:

#blue-portion {
     float: right;
}

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

The navigation bar is positioned with white space above it

Currently working on a website design and facing an issue with adding a clickable button to the Nav-bar. Noticed some white-space above the Nav-bar which is not desired. I had previously posted a similar question but unable to identify the CSS error causi ...

I am unable to connect an external CSS file when Bootstrap is already linked

Having trouble with linking my external CSS file while also linking bootstrap. The CSS file doesn't seem to load when the bootstrap link is included, but it works if I comment out the bootstrap link. body { background-color: black; font-size: 2 ...

Launch an Android application directly from a web browser upon the webpage's loading

When a user visits www.example.com/myApp, I want my app to open automatically without any click required. I have attempted the following methods: window.onload = function () { window.location.replace("intent://something#Intent;scheme=myapp;packag ...

Using CSS transforms to place the vanishing point

I am attempting to utilize CSS transforms to create a flat 'floor' that extends infinitely towards the horizon. The vanishing point, where the floor disappears into the distance, should align halfway up the browser window. I have encountered an ...

Separate your buttons with style using the Bootstrap button groups with

Is there a way to add border line separators between buttons in Bootstrap button groups? <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class=&quo ...

There was an uncaught error in AngularJS stating that the URL in the HTTP request configuration must be a string

I've been working on a web application and have encountered some challenges. One particular issue I'm struggling with is related to the following code snippet: this.bookSpace = function (date, spaceId) { swal({ title: "Are you sure?", t ...

Designing a dynamic class object for a material table

I am in need of assistance with creating an HTML table using data retrieved from an API. The structure of the data is as follows: { strTableName: "TestTable", strComment:"Approved", lstTableHeaders:[ {strFieldName : "Sl No.", strType:" ...

Detection of numerous Google Analytics tags

To troubleshoot a client's Google Analytics account connected to their website, I decided to utilize the Tag assistant by Google extension. Upon running it, an alert popped up displaying "Multiple Google Analytics tags detected." One tag was the one I ...

Understanding and processing HTML strings in typescript

I am currently utilizing TypeScript. Within my code, there is an object named "Reason" where all variables are defined as strings: value, display, dataType, and label. Reason = { value: '<ul><li>list item 1</li><li&g ...

Expanding Grid Container in Material UI to Fill Parent Height and Width

Challenge I'm struggling to figure out how to make a Grid container element expand to the height and width of its parent element without directly setting the dimensions using inline styles or utilizing the makeStyles/useStyles hook for styling. I&ap ...

Enhancing the appearance of unvisited links with background styles

I am endeavoring to incorporate an icon into all unvisited links on a specific Wordpress category page. Below is the CSS code that I am utilizing. It has been placed at the conclusion of my final CSS file. .category-xyzzy .entry-title a:link { background ...

Calculate the total price using Jquery once selections have been made

I am looking to create a dynamic pricing feature where clicking on a checkbox will update the total price. The prices are calculated per day, so if days are added, the total should reflect that accordingly. Check out our demo here: http://jsfiddle.net/XqU ...

Tips for positioning a div to match the height of its parent div

How can I make a div stretch to the height of its parent using Bootstrap 3.0.2 without using a script? Check out the fiddle linked below. In this example, I want to stretch the blue container to match the height of the parent green container. View Fiddle ...

Creating two horizontal flex containers with an input box that is responsive can be achieved by setting the display property

I need some assistance with a layout issue I am facing. Currently, I have two flex containers in a row - one set to flex-start and the other to flex-end. Both of these containers are within a wrapping div that is also set to flex. When the width of the wi ...

Is the trigger feature malfunctioning in Chrome?

Recently, I implemented a trigger function in order to enable another function by triggering the text box. Unfortunately, I am experiencing difficulties as it does not seem to be working properly on Google Chrome. Any assistance you can provide would be ...

Utilize Bootstrap form control class to enhance the appearance of WooCommerce address fields

I'm struggling to incorporate the bootstrap class "form-control" into all of the woocommerce address fields in my account and during the checkout process. Essentially, I am attempting to apply the "form-control" class to both the billing and shipping ...

Is there a mistake in the way I am creating a horizontal navigation bar?

Currently working on creating a simple navigation bar using HTML/CSS for a Java/Spring Boot project. Admittedly, my HTML/CSS skills are quite limited as you can see below. I'm aware that there might be some mistakes in my approach. Thank you in advanc ...

Setting the z-index of the parent element causes issues with overlapping

When adjusting the z-index property of the parent element, I am experiencing issues with overlapping elements. Below is the HTML and CSS code: .black_gradient{ width:100%; height:100%; background: linear-gradient(0deg,rgb(75, 75, 75) 20%, rgba(75,75 ...

The second pop-up modal fails to appear

I have successfully implemented 2 modal windows with the help of bootstrap. The first modal is used for adding a user to the database, and the second one is meant for editing an existing user. While the first modal works perfectly fine, the editing modal d ...

Prevent double-click selection functionality

In my code, I have a CSS class called .noselect that disables text selection using various browser-specific properties. However, I am now looking to modify it so that the text can still be selected, but not when the user double-clicks on it. Is there a wa ...