How to position one div next to another using CSS and HTML

Hey there, I'm facing an issue with creating a sidenav next to a div containing paragraphs and images. I can't seem to make both the sidenav and the other div appear inline. If anyone has any insights on how to solve this problem or spot what I'm doing wrong, I would really appreciate your help...

Below is the snippet of CSS code I've been working with:


body{
  background-color: #404035;
}

header{
  height: 50px;
  padding: -500px;
}

header h1{
  text-align: center;
  color: white;
}

#brief-info {
  padding-left:250px;
  display: inline-block;
}

This is the HTML code snippet for reference:


<body>
    <main>
        <header>
            <h1>ANDRES PACHANO</h1>
        </header>
        <div class="sidenav">
            <a href="index.html" id="home">Home</a>
            <a href="">About Me</a>
            <a href="">Contact Info</a>
            <a href="https://github.com/PaxanoA" target="_blank" id="github">Github</a>
            <a href="">Resume</a>
            <a href="">Support Me</a>
        </div>
        <div class="content">
            <p id="brief-info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
            </p>
        </div>

    </main>
</body>

Answer №1

If you want to align your sidenav and content side by side, you can enclose them in a div with the CSS property display: flex;. This will allow you to control the layout of the elements.
To ensure that the navigation items do not break into new lines, you can apply the CSS rule white-space: nowrap;.

.row {
  display: flex;
  flex-direction: row;
}
<div class="row">
  <div class="sidenav">SIDENAV</div>
  <div class="content">CONTENT</div>
</div>

Answer №2

If you're finding it difficult to grasp some basic concepts, I recommend exploring a simple and effective CSS framework or boilerplate available online.

While Bootstrap is widely used and popular, you might find it overwhelming. In that case, consider checking out Skeleton:

Skeleton is straightforward and practical.

Take a closer look at their grid system here:

 <div class="row">
    <div class="three columns">Three</div>
    <div class="nine columns">Nine</div>
 </div>

That's all there is to it.

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

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

Align an image in the center of a div without using absolute positioning

I'm currently facing an issue where I need to align an image at the center of a div without using absolute positioning. This is necessary because the image spills over into any adjacent divs on the page. Specifically, I have a previous div containing ...

Styling the Next and Previous Page Links in your WordPress Website

Currently working on developing my own custom Wordpress theme and everything is going well, except for one little detail. I am trying to customize the styling of my next/previous page links so that the next page-link appears on the right side and the previ ...

How can I use Angular to bind the text entered in an `input` within one `ng-repeat` `div` to another `div` within a different `ng-repeat`?

I am trying to create a dynamic Angular-based webpage where input tags are connected to h3 tags in separate DIVs. Below is the setup of my HTML page (as seen on Plunker): <!DOCTYPE html> <html> <head> <style type="text/css> ...

Range slider position not being updated after user interaction

I am working on a webpage with an embedded video and a range slider that serves as a progress bar. Using Javascript, I update the value of the range slider as the video plays, allowing users to navigate through the video content. However, I have encounter ...

pressing the switch will adjust the size of the container

I am looking to implement a feature where clicking on an icon will resize a div to full screen in the browser. Below is the HTML code I have set up for this functionality, and I am open to suggestions on how to achieve this. <div> <a (click)= ...

"Navigate through the page by scrolling with your mouse all the way to 100

Is it possible to trigger an action when a user starts scrolling using the mousewheel? I've searched online but all I found was information on 100% scroll on click. I want the window to automatically be scrolled down to 100% as soon as the user starts ...

Loop through a list of form names using ng-repeat and send each form name to a JavaScript function when clicked

I have multiple forms within an ng-repeat loop, each with a different name. I need to pass the form data when a button inside the form is clicked. However, when I try to call it like this: checkSaveDisable(updateProductSale_{{productIndex}}) it thro ...

100% width with a pixel offset

In the past, I have achieved this by using padding. The concept is to have two div elements positioned side by side, where one has a width of 100% and the other has a fixed width of 50px. Here's a rough illustration: ------------------------------- ...

iPhone has trouble accessing alternative forms of content

<object width="300" height="100" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param value="5352f5c8e96c251fb9d79890f2294608.swf" name="movie"> <!--[if !IE]>--> <object width="300" height="100" data="5352f5c8e96 ...

Elevate with Ease: Tailwind's Height Transition

I've been attempting to implement a transition effect using TailwindCSS, but I haven't found an updated version with the latest features. Here's the code snippet: <div id="fadeInElement" className={visible ? " w-2/3 px-5 t ...

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

Loading information in a directive by utilizing promises in a service with AngularJS

Can anyone lend a hand? I've been struggling to solve this issue. I created a directive (see below) to display a pre-written ul-list on a page using html data fetched asynchronously from a database server. Both the Directive and The Service are funct ...

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

The ng-repeat-start feature is not functioning properly across different levels

I am attempting to utilize the ng-repeat-start directive in order to construct a table that resembles the following: https://i.sstatic.net/Qgc91.png The structure of my JSON data is as follows: [ { "name": "Chapter 1", "parts": [ { ...

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

Issue with Photoswipe pswp class Not Getting Properly Cleared Upon Closing Image

My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time. For example, when a user opens item 1, the images are loaded into the picture div via A ...

What is the best way to implement a calendar view for selecting time periods on an HTML page?

Is there a way to implement a calendar view when clicking on the input box within an HTML page? I am looking to create a function where users can select a time period to generate a file. How can this be accomplished? If possible, could you share some samp ...

Struggling to make an AJAX form function properly

I'm running into an issue while setting up a basic AJAX form. My goal is to have a message display on the same page upon successful login using a PHP form through AJAX, but currently, I get redirected to the PHP file after form submission. Can anyone ...

Tips for creating scrollable popovers in Bootstrap 4

I came across a similar question, but the solution provided didn't work for me and I'm not sure why. Why is my popover content not scrolling when it exceeds 50px? Also, a side question: I'm facing an issue with newlines within the popover wh ...