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>
htmlcss

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

Post the HTML5 player on your Facebook feed

Currently, I have a player that exists in both Flash and HTML5 versions. When calling a page through an iframe, the browser and device are detected automatically to load the player accordingly, and this setup is functioning correctly. Prior to implementin ...

facebookhtmlfacebook-graph-apifacebook-opengraph

What are the best methods for aligning pseudo elements vertically?

I am facing an issue with the placement of a before and after pseudo element for articleSubTitle. The problem occurs when the text from articleSubTitle wraps to a new line within a small container or on mobile devices. This causes the after element to appe ...

htmlcss

Conceal the information within a table using angular js and HTML

Just starting out with angular and I have a table that displays angular data directly in the HTML without any controller or model. <table width="98%" border="0" cellspacing="1" cellpadding="2" class="labels" align="center" id="locc"> <tr style ...

javascripthtmlcssangularjs

Boost your website's loading time by utilizing the async and defer attributes

Looking to enhance the speed of my webpage, particularly focusing on improving initial page speed. Research suggests that using the async and defer attributes for JavaScript can be beneficial. All JavaScript scripts are currently placed just above the cl ...

javascriptcsshtmlsrc

Is there a method to measure the time it takes to download a script apart from its actual execution time

I am looking to track timing variables for my primary JavaScript load. One approach could be: <script> performance.mark('script-start') </script> <script src="something.js"></script> Later in something.js, inc ...

javascripthtmlperformance

Issue when attempting to animate an SVG point using translateX transformation

I am attempting to create a basic animation using the translate X property on a section of my svg when hovering over the element. Here is the code I have so far: <html> <style> .big-dot:hover { transform: translateX(20px); animat ...

javascriptcsssvgnext.js

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

Why isn't it possible to send POST data to a JSON file using JQuery/AJAX?

I'm currently learning how to use JQuery/Ajax from a helpful tutorial on YouTube. To watch the video, simply click here. While I can successfully retrieve data from the order.json file, I encounter an error whenever trying to send POST requests. Bel ...

javascriptjqueryhtmljsonajax

Ways to create a transparent parallax background

Currently, I'm tasked with developing an educational website using HTML and CSS for a school project. Unfortunately, due to restrictions on code.org, I cannot utilize JavaScript files or script tags. Despite successfully implementing a parallax effect ...

cssbackgroundprojectparallax

jQuery Autocomplete - struggling to pinpoint the exact location where the width of the suggestions div is being defined

I have successfully implemented jQuery Autocomplete, but I am facing an issue with adjusting the width. Currently, it is set to 268px in Firebug, however, I would like it to be 520px. After checking the stylesheet, I couldn't locate where the width o ...

javascriptjquerycssstylesheetclient-side

Problem with jQuery's .prepend method being called twice on list items

Looking to enhance the appearance of a list by adding some icons before the anchor links within each list item. <ul class="submenu-children"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ...

javascriptjqueryhtmlappend

I designed my radio buttons to ensure they cannot be selected multiple times

I have developed a basic React custom controlled radio button: export const Radio: FC<RadioProps> = ({ label, checked, onChange, disabled, }) => { const id = useId(); return ( <div> <label htmlFor={id} ...

cssreactjs

Pagination displays identical data on each page

When utilizing pagination in my AngularJS application to display search results fetched from an API call, I encountered an issue where the same data set appears on all pages. Here's what I have attempted: Within the Controller $rootScope.currentPag ...

htmlangularjspaginationcontroller

A technique for postponing the addition of a class to a div

I am attempting to create a unique type of slider effect. Inside a single div named #slider, I have 9 items displayed in a line. Link to JsFiddle The slider is 1860px wide, but only 620px is visible at any given time due to the parent having an overflow: ...

javascriptjqueryhtmlcss

What is the best method to incorporate a JavaScript object key's value into CSS styling?

I am currently working on a project in React where I'm iterating over an array of objects and displaying each object in its own card on the screen. Each object in the array has a unique hex color property, and my goal is to dynamically set the font co ...

javascriptcssreactjssassstyling

IE11 blocking .click() function with access denied message

When attempting to trigger an auto click on the URL by invoking a .click() on an anchor tag, everything works as expected in most browsers except for Internet Explorer v11. Any assistance would be greatly appreciated. var strContent = "a,b,c\n1,2,3& ...

javascripthtmlinternet-explorer

What is the solution for setting a regular height to a Bootstrap select when no option is currently selected?

On my webpage, I am incorporating bootstrap select and I want it to be empty initially with a value of "" when the page first loads. This is essential because it is a required field, so if a user attempts to submit the form without making a selec ...

htmltwitter-bootstrapbootstrap-select

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

Utilizing React to transform object data into table columns

I need assistance mapping the following object array into table columns using react. The table has 4 columns, and I want these values to be displayed in them. There are also two rows that need to be filled out. <table> <tbody> ...

htmlreactjs

Several levels piled one on top of the other

I'm in the process of designing a section for a webpage using Bootstrap 3.0, and I want to layer three divs or sections on top of each other. The stacking order should be as follows: background "squares," footer, and foreground "squares" with images. ...

htmlcsstwitter-bootstrap