Ensure that the div is styled with a white background and positioned next to another div with a right margin

I have a white-colored div that needs to be positioned next to another element on a webpage. Additionally, I need a paragraph placed on top of this div for information purposes. Please refer to the following link to see what I am trying to achieve: 

body {
    margin: 0;
    padding: 0;
    background-color: #2E2E46;
}

#nav_top {
    // Styles for nav_top
}

// More CSS code here

#subtexttext {
    font-size: medium;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-weight: bold;
}
<body>
   // HTML code here
</body>

Check out the JS Fiddle demo

The challenge lies in positioning two adjacent divs named content and sidenav correctly on the page layout. To align #content properly with other elements, it needs to be indented by 75px from the right and 355px from the left. Finding the right CSS properties to achieve this has proven tricky as setting it to absolute position affects the background size while setting it to static makes alignment with #sidenav difficult. As someone new to HTML and CSS, any suggestions or guidance would be greatly appreciated after spending hours on this issue.

htmlcss

Answer №1

Take a look at the following information to understand more about absolute and relative positioning:

https://jsfiddle.net/psv6xo9w/

body {
    margin: 0;
    padding: 0;
    background-color: #2E2E46;
}

.container {
  margin: 0 75px;
}

#nav_top {
    background-color: #000000;
    left: 0px;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 0;
    height: 75px;
    color: #FFFFFF;
    top: 0;
    width: 100%;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-indent: 0;
    line-height: 0%;
}

#h1 {
    margin-left: 76px;
    padding-top: 20px;
    width: 200px;
}

#help_nav {
    float: right;
    top: 0px;
    margin-top: 20px;
    font-style: normal;
    font-weight: lighter;
    font-size: small;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    text-decoration: none;
    margin-right: 35px;
}

#logo {
    width: 59px;
    float: left;
    padding-top: 7px;
    padding-left: 12px;
}
#pagetitle {
    background-color: #553D53;
    color: #FFFFFF;
    opacity: 1;
    float: none;
    height: 350px;
    position: relative;
}

#bgc {
    float: left;
    width: 100%;
    height: 15px;
}

#wires {
    margin-top: 35px;
    width: 300px;
    position: absolute;
    right: 0;
}

#titletext {
    float: left;
    padding-top: 20px;
    padding-left: 100px;
    color: #FFFFFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bolder;
    width: 100%;
}

#titlehead {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bolder;
    font-size: xx-large;
}

#subtext {
    color: #FFFFFF;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 2;
    font-size: xx-small;
    text-decoration: none;
    display: block;
    float: left;
    width: 100%;
    padding-left: 100px;
}

#sidenav {
    float: left;
    padding: 0px 29px;
    width: 25%;
    background: #696969;
}

#navbartitle {
    margin-left: 55px;
    color: #FFFFFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: xx-large;
}
#content {
    background-repeat: repeat;
    background-position: 0% 0%;
    background-size: contain;
    background: white;
    float: left;
    top: 1px;
    width: 70%
}

#subtexttext {
    font-size: medium;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-weight: bold;
}

.row {
  float: left;
    width: 100%;
}
<div id="nav_top">
        <div id="help_nav">
            <h2><a href="#" style="color:white">Contact</a> | <a href="#" style="color:white">Help</a> | <a href="#" style="color:white">Report</a>
            </h2>
        </div>
        <div id="logo">
            <img src="images/Asset_1.png" width="50" height="58" alt="" />
        </div>
        <div id="h1">
            <h1>A.H.E.M</h1>
        </div>
    </div>
    <div class="container">
      <div id="pagetitle">
          <div id="titletext">
              <h2 id="titlehead">This is the content for Layout H2 Tag</h2>
          </div>
          <div id="subtext">
              <h2 id="subtexttext">This is the content for Layout H2 Tag</h2>
          </div>
          <img id="wires" src="images/wires.png" width="275" height="303" alt="" />
          <img id="bgc" src="images/Artboard 1.jpg" width="150" height="86" alt="" />
      </div>
      <div class="row">
        <div id="sidenav">
          <h2 id="navbartitle"> Navigation</h2>
          <img src="images/nav2.png" width="280" height="648" alt="" />
        </div>
        <div id="content">
            <h2> Dogs</h2>
        </div>  
      </div>
    </div>

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

Utilize Java to launch the HTML file in a web browser

I have a specialized need for my HTML files to be displayed on a platform that is browser-free. The solution that immediately comes to mind for me in this scenario is utilizing applet. Therefore, I am interested in having my HTML file (including CSS and JS ...

javahtmlcssswingapplet

A step-by-step guide on modifying the box-shadow color using jquery

I have developed some JavaScript code that adjusts the box-shadow of buttons to be a darker version of their background color. This allows users to dynamically change the button background colors. The current code successfully changes the box shadow based ...

javascriptjquerycss

Creating a form that is unable to be submitted

Can a form be created in HTML without the ability to submit, all while avoiding the use of JavaScript? I would like to utilize <input type="reset"> and have intentionally omitted an <input type="submit">, but there is still the possibility for ...

htmlforms

Ignored are the white spaces within a pre tag

From what I understand, the 'pre' tag is supposed to collapse all white spaces and tabs into one space. However, I have noticed that this doesn't happen for me. I'm curious as to why this may be the case. Could it possibly be dependent ...

htmlwhitespacepre

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

javascriptcssreactjsmaterial-ui

Issue with automatic compiling in Sublime 2 for less2css

Whenever I try to save my style.less file, the automatic compilation doesn't happen. Is there a mistake in how I've set it up? Here's what is currently in my ox.sublime-project file: { "folders": [ { ...

csscompilationlesssublimetext2

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

Difficulty achieving gradient effect with partial background color change in table-cell

In order to achieve a unique look for this particular design, I am seeking ways to alter the red background color of each cell in varying degrees - such as 100% for the first cell, 100% for the second cell, and 50% for the third cell. Update: After experi ...

htmlcssbackground-colorlinear-gradients

Swap out the image backdrop by utilizing the forward and backward buttons

I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character disp ...

javascriptjqueryhtmlcss

Checkbox offering a tri-state option

Seeking help on creating a checkbox with three states. I have implemented a method to toggle between these states upon clicking. However, the issue is that this method is only triggered after the HTML changes. As a result, the checkbox's navigation be ...

htmlangulartypescriptangular2-forms

Conceal an element if the angular attribute does not contain any value

Currently, I am facing an issue with an image element in my project. The path for this image is being fetched from an attribute present on my angular object. However, if this imagePath attribute is empty, a broken image is displayed. I want to avoid rend ...

htmltwitter-bootstrapangularjs

Using PHP, JavaScript is unable to hide <div> elements

I'm encountering an issue where the div I want to show when an error occurs is not hiding and showing properly using JavaScript. Here is a snippet of my code: <script> function hideerror() { var catdiv = document.getElementById(error); ...

javascriptphpjqueryhtmlcss

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

csshtmlheight

Animate your menu on hover with jQuery!

I am experiencing an issue with centering the background image below a link. When using mouseleave, the image does not return exactly to the center of the list. Any assistance on how to resolve this would be greatly appreciated. Thank you! Here is the ref ...

jqueryhtmlcss

Unable to add data to an Array once subscribed to BehaviorSubject

Hello everyone, this is my first time asking a question here. I hope it's clear enough for you to understand :) Let's dive straight into the issue at hand. I have a query regarding a behaviorSubject variable in TypeScript that is not allowing me ...

htmlarraystypescript

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

javascriptjqueryhtml

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

Utilization of z-index with float: left within an image gallery in CSS

Currently, I am working on an image gallery that has content generated randomly. In terms of CSS, the images are positioned using the following code: .item { width: 200px; margin: 10px; float: left; } To add some functionality, I have implemented ...

jqueryhtmlcsscss-floatz-index

Discover the method for storing multiple values in local storage using a dictionary with JavaScript

I have a scenario in my code where I need to update a value without storing a new one. Let's say I need to input values in the following format: { firstname:'kuldeep', lastname:- 'patel' } After entering the values, they g ...

javascriptjqueryhtmlarrays

Would you prefer to generate fresh HTML using JavaScript or dynamically load an existing HTML layout using AJAX?

I have a project where I need to generate a large amount of HTML that isn't currently on the page. Up until now, I've been using jQuery to construct the page piece by piece with JavaScript, adding divs and adjusting layouts as needed. Lately, I ...

javascriptjqueryhtmlajax