Simple Design: Main Navigation Bar Positioned to the Right Side of the Master Page

I must admit, styling is not my strong suit and I could use some help. On my CSS page, I need the MasterPage Navigation bar to be on the left side. However, when I click on a link to go to a different page, I want the content to show up in the middle while keeping the navigation on the left.

Is this more than just a styling issue? If so, please lend me a hand.

Below is my ASP code:


    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="~/MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    ...

I know it may seem basic to some, but I've hit a roadblock with styling.


    Body
{
    
}
Aside
{
    
}
Footer
{
    
}

Any assistance would be greatly appreciated. I understand this may be simple for some, but I could really use a helping hand.

Thank you!

EDIT: Currently, everything is aligned on the left side. The content from other pages appears alongside the navigation bar. I'm struggling to center it.

Answer №1

To solve the issue, you can utilize floats:

  1. Make your sidebar float to the left.
  2. Set your main content to float right.
  3. Include the following code after your main div:
    <div style="clear: both;"></div>

This should resolve the problem. For a simple demonstration, you can view this JSFiddle example:

http://jsfiddle.net/LM3xp/

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 best way to align text with my CSS number and circle on the same line?

Here are two questions for you: First off, I've successfully created a circle with a number inside it using CSS. How can I go about filling the circle with color? Secondly, I'd like to know how I can align the words "Opportunity #1" on the same ...

How to position an image on top of each printed page using HTML/CSS (SCSS)

I've created a simple and small webpage that looks like this: https://i.sstatic.net/R7Ajz.png Everything is perfect in the browser, with all the styles (margin, padding, etc.) just as I want it. However, my issue lies in the print view of the page. ...

Create a layout that includes options with checkboxes and divs styled inline

I'm in the process of setting up a voting poll on a website. The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the ...

What is the best way to extract negative and positive integers from a string in C#?

I am having an issue where the code is displaying ten instead of the error message int _userInt = 0; string _checkForNumbers = "Mitchell, -10"; var _intInput = string.Join("", _checkForNumbers.Where(char.IsDigit)); int.TryParse(_intInput, out _userInt); ...

How do I incorporate a jcarousel slider into a thickbox popup using jQuery, HTML, and CSS?

I'm attempting to incorporate a dynamic car carousel slider into a popup that opens with Thickbox. I've made numerous attempts but haven't achieved success yet. It works when called directly in HTML, but doesn't function properly when ...

Click the button to trigger a loading popup, followed by a change in the text displayed on

I have a button that triggers a popup box when clicked. However, I want to add a loading circle with text underneath before the popup appears, and for it to display after 3 seconds. Is this doable? Here is my current code snippet: <a href = "javascrip ...

Tips for inserting an HTML table into a div element using JQuery/JavaScript

I currently have a navigation bar with only two items. While I may potentially add more items in the future, for now I am content with just these two. Upon opening the page, my goal is to display the content of the first item in the navigation bar. Each it ...

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

Rotation using CSS in Internet Explorer 8

Can anyone help me with a CSS solution for rotating elements in IE8? I've tried some solutions that claim to work in IE8, but they're not working for me. What am I doing wrong? Here's what I've attempted: <!DOCTYPE html> <htm ...

Struggling with getting basic CSS to work with React's MUI framework

I've been attempting to incorporate basic CSS with MUI components. According to their website, it should be feasible. https://material-ui.com/guides/interoperability/#plain-css But unfortunately, I'm having trouble getting it to function prope ...

Make sure to include !important for the hidden property when applying inline styles in React jsx

Is there a way to include !important in the hidden property within React JSX inline style? I'm attempting to conceal the scroll bar in an Ag Grid table component as it is displayed by default. I've already attempted: ref={(nod ...

The Bootstrap 4 container class is known for leaving a peculiar dot next to the container

I am utilizing the container class from Bootstrap 4 to arrange my project details based on screen resolution sizes. However, I have encountered a strange dot that remains even after trying to remove it. You can view the HTML code I am currently working o ...

Is there a way to position this Flex-Box Item beside the image?

Please refer to the image How do I rearrange this Flex-Box Item to be positioned next to the image? https://i.sstatic.net/eSy3w.png <div class="brif fb"> <div class="sml-con"><img class="sml-thumb" src="images/chosen/edwa ...

Navigation menu automatically scrolls to the top instantaneously

Update: Apologies for the previous issues encountered with offline hosting. Upon transferring everything to the domain, the problem has been resolved. However, a lingering question remains about why the website loaded incorrectly when all files were kept i ...

Techniques for adjusting the dimensions of a select dropdown using CSS

Is there a way to control the height of a select dropdown list without changing the view using the size property? ...

How to append a CSS class with JavaScript without removing existing classes

Utilizing a ddsmoothmenu involves dynamically adding a class name to the parent menu container through the plugin. Once applied, all CSS rules will also affect the menu. Below is an example of how the classname is passed: <div id="myMenu"> <ul ...

jQuery "slide" animation without using <br>

I've been working on a website that incorporates the jQuery "Slide" effect. I have implemented this effect multiple times, using it on 3 different div tags. Each line consists of one "Dynamic" div tag (the moving one) and one "Static" div tag (the tri ...

What is the best way to extract the value of a textbox from one control and transfer it to another control?

I am having trouble with retrieving the values of text boxes from two controls: ProductInfo and Distribution. Within the Product Info Control, there are text boxes labeled txtPrice, txtDate, and txtFreq. I need to access these values on the Distribution co ...

Is it possible to generate a WSDL from a C# WCF service in the same manner as I previously did with a C# web service?

For the web service I need to create, I am considering using WCF. My collaborator is requesting a wsdl file from me. I am wondering if I can still implement a credential header in the existing WCF service as I have done with traditional web services. ...

Utilizing background image CSS class repetitively

I have a button background class that I want to reuse multiple times. How can I keep all the common styles separate and only change the URL multiple times? Here is my CSS: .menuBtnColour{ position: relative; //common top: 0;//common left: 0;/ ...