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: https://i.sstatic.net/RPsO4.jpg

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

Including a variable in an array within a function

I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...

javascripthtmlarrays

Unable to make a choice from the dropdown list

Recently, I started learning about selenium and encountered challenges when it comes to selecting elements from dropdown menus. The issue arises when I try to implement the code using PhantomJS - the same code that works perfectly fine with Firefox as WebD ...

javahtmlseleniumphantomjs

Submitting a form from outside the form using a button in HTML: A step-by-step guide

I'm looking to submit a form using Angular on the functions next() and saveStep(). I'm unable to place next() and saveStep() within the form itself. I have set up my ng-click for next() and saveStep() below the form. When I submit the form fro ...

htmlangularjs

Reveal a concealed div in a modal form depending on the value present in the input field

After spending the past 4 hours scouring through Google and SO, I finally stumbled upon an answer HERE that seemed to be somewhat close to what I was looking for. However, in my scenario, the <div class="fhlbinfo"> elements are not displaying or hi ...

jqueryhtml

What methods can I use to eliminate an iframe virus that has infected all my PHP files on my website?

I'm facing a challenge with eliminating a virus code from my php files. All 1200+ php files on my server have been infected by this malicious code, which injects the following line into the html output: Here is the virus code: <tag5479347351>& ...

phphtmliframevirustrojan

How can I include inline CSS directly within a string instead of using an object?

Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...

javascriptcssnext.jssassnext.js13

Removing an unnecessary DIV element from an HTML Document

I have been working on a News application and am utilizing a web product to fetch News Headlines. When I request a NewsHeadline, the product sends back an HTML Code containing the News Headline. <div class="mydiv"> <script type="text/javascript ...

javascripthtml

The two CSS classes are styled with different border-color values, but only one is being applied correctly

My goal is to modify the border color of a textarea using jQuery. Previously, I achieved this by using .css("border-color","rgb(250,0,0)"), and it was working perfectly. However, I have now been advised against using CSS directly in JavaScript and told to ...

javascriptjqueryhtmlcss

A complete guide on utilizing *ngFor in Angular to display data rows

I am facing an issue with using *ngFor to create new "rows" for adding new categories dynamically. Although there are no errors displayed when I run the program, the intended functionality is not achieved. I have tried making some modifications but it see ...

htmlcssangular

Why does the flex-start and flex-end values correspond to the top and bottom positions when using the flex-direction property set

I am attempting to organize text and buttons into a row, with the buttons aligned on the right side and the text on the left side. My approach involves creating a flexbox layout and assigning items the appropriate classes for alignment. html, body { widt ...

htmlcssflexboxalignment

Order of tabs, dialog, and forms customization using Jquery UI

I'm currently working on a jquery dialog that contains a form split into multiple tabs. In order to enhance keyboard navigation, I am looking for a way to make the tab key move from the last element of one tab to the first element of the next tab. Cur ...

javascriptjqueryhtmljquery-ui

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

The background video is not working on iPhones, even though it was functioning properly in the past

After extensive searching, I have been unable to find a solution to my issue. I used an html5 video element as a background with success on both web and mobile platforms, until recently. I have tried adding all necessary attributes for compatibility and I ...

htmlcsshtml5-videomobile-safari

Applying CSS classes to my div element

Check out the following code snippet: <div class="page-template-default logged-in"></div> I am trying to apply a class like this: .page-template-default .logged-in { } However, it doesn't seem to work. Any idea why? ...

css

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

javascriptandroidjqueryhtmljquery-mobile

What is the process for uploading an HTML input file in segments?

Is it possible to upload the whole file at once like this: myInput.onchange = ({ target }) => { const file = target.files[0]; const formData = new FormData(); formData.append("fileData", file); // ...then I post "formData" ...

javascripthtmlformsfile-upload

What is the best way to ensure that my cards maintain consistent proportions?

My cards are not maintaining their proportions, causing buttons to pop out of the card and the card dimensions changing. I realize this issue is due to using fixed width and height in combination with flex. I'm struggling to find the best solution to ...

htmlcss

Dynamic Loading of CSS Styles

My style-sheet is saved in this unique location: /opt/lampp/htdocs/project/core/styles/Style.css To load the CSS file using the full directory, considering that the files utilizing it are situated here: /opt/lampp/htdocs/project/client/ The ultimate ob ...

javascriptphpjqueryhtmlcss

What is the best approach to decrease the size of a button in HTML and CSS when the text size is also reduced?

Check out this code snippet! I'm new to coding, so let me know if you see any errors or ways it could be improved. button { font-size: 10px; font-family: roboto, Arial; color: white; background-color: rgb(59, 102, 241); border-radius: 100p ...

htmlcss

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...

javascripthtml