Is your ASP.Net web page stacking XML documents instead of displaying them side by side? Could this be a CSS problem?

I am working on an asp.net web page that features a menu bar divided into 3 columns. Currently, the columns are displaying one on top of each other instead of side by side. I suspect it may be related to the CSS code.

Here is my asp.net web code:

<div class="menubar">

        <div class="menuleft">
            <asp:ContentPlaceHolder ID="menubarleft" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        <div class="menucenter">
            <asp:ContentPlaceHolder ID="menubarcenter" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        <div class="menuright">
            <asp:ContentPlaceHolder ID="menubarright" runat="server">
            </asp:ContentPlaceHolder>
        </div>

</div>

This is my CSS code:

div.menuleft
{
    float: left;
    width:30%;
    text-align:left;
}

div.menuright
{
    float: right;
    width:30%;
    text-align:right;
}

div.menucenter
{
    float: left;
    width:auto;
    text-align:center;
}
asp.nethtmlcssxmlvb.net

Answer №1

If you're looking to update your CSS, consider the following modifications:

Change div.menuright to float:left instead of right, and modify div.menucenter to have a width set as a percentage (width: 30%).

Let me know if this is what you were thinking.

Answer №2

Check it out, I have implemented a solution by adding an additional div to clear the float effect and made some adjustments to your stylesheet:

<div class="menubar">

    <div class="menuleft">
        <asp:ContentPlaceHolder ID="menubarleft" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <div class="menucenter">
        <asp:ContentPlaceHolder ID="menubarcenter" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <div class="menuright">
        <asp:ContentPlaceHolder ID="menubarright" runat="server">
        </asp:ContentPlaceHolder>
    </div>
       <div class='clear'></div>
    </div>

Here is your updated stylesheet:

   div.menubar{
    width:100%;/*or width:1024px; depending on your page*/
   }
   div.clear{
      clear:both;
   }

 div.menuleft
 {
    float: left;
    width:30%;
  /* text-align:left;*/
 }

div.menuright
 {
    float: right;
    width:30%;
    /*text-align:right;*/
 }

 div.menucenter
 {
   float: left;
    width:auto;/*not auto*/
   max-width:39% /* 100%-30%-30%=40% but consider using 39% for better results */
   /* text-align:center;*/
 }

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

Sizing Bootstrap Carousel Controls

Is there a way to adjust the size of controls in the bootstrap carousel using CSS? I'm working with Bootstrap 4 and have attempted the following, but it only seems to reposition them. .carousel-contol-prev { height: 26%; top: 33%; wid ...

cssbootstrap-carousel

Ways to display a confirmation message prior to deleting?

When deleting, I would like a confirmation message to appear upon clicking the delete button or image. If the user chooses 'Ok', then the deletion will proceed; however, if 'Cancel' is selected, nothing will happen. I attempted to disp ...

javascripthtml

Is it essential to minimize (compress; deflate) HTML for storing in a database?

Is there any advantage to reducing the amount of HTML stored in a SQL Server nvarchar(max) column? When I say minimizing, I am referring to removing unnecessary white space and line breaks in the HTML text. I'm not talking about deleting any HTML tag ...

htmlsql-servercompressionminimization

Convert a list into nested JSON items by utilizing the getJSON function

Below is an example of a JSON object: {"sessions":[ { "totalusers":"2", "Users": [ { "id": 1, "name": "abc" }, { "id": 2, "name": "def" } ] } ]} Here is the corresponding HTML structure: <div> ...

javascriptjqueryjsonhtml

Ways to retrieve the value from a button when it is clicked

I am facing an issue where I have buttons that are generated dynamically depending on the number of phone numbers available in the database. For example, if there are 3 phone numbers in the database, there will be three buttons displayed. The aim is that w ...

javascriptjqueryhtml

Is there a way to narrow down the font choices using HTMLPurifier?

- Currently in my project, I have incorporated an HTML-WYSIWYG Editor that allows users to utilize various Webfonts for styling their texts. The editor I am utilizing can be found at NiceEdit. It generates code snippets such as: <font face="c ...

phphtmlfontswysiwyghtmlpurifier

Ways to set a button as default clicked in an Array

I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...

javascripthtmltypescript

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

javascriptjquerycssdjangotwitter-bootstrap

Creating a Dynamic Layout with Varying Items in an Array Using PHP

Suppose I provide you with an array of objects, where x represents the number of objects. How would you achieve the following using a grid system (bootstrap, foundation, etc.)? Loop over the array and generate something similar to: https://i.sstatic.net/ ...

phphtmlarrayszurb-foundation

Passing form values from JavaScript to a JSP page - a comprehensive guide

I am working on a sample HTML page that includes inline JavaScript for calculating geocodes and retrieving latitude and longitude values. My question is, how can I submit all the form values along with the latitude and longitude returned from the showlocat ...

javascripthtmlformsjsppost

How to send emails from ASP.NET using Gmail SMTP with OAUTH authentication

After conducting extensive research, I am struggling to implement a sample mail sending application. Despite finding similar solutions from various sources, the code provided is not working for me. The exception I am encountering is linked https://i.sstati ...

c#asp.netemailnetwork-programming

Center the code within the h2 heading

Here in this demonstration (bootply link): <h2>Title <small><code>one line</code></small></h2> I am attempting to vertically center the code element with the title. Despite trying to apply vertical-align: middle to the ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Cache application

Experimented with the following code snippet from w3schools: Coding in index.html <!DOCTYPE html> <html manifest="demo_html.appcache"> <body> <script src="demo_time.js"></script> ...

htmlhtml5-appcache

Unable to generate the 'validator' property on the string 'userForm' while utilizing the component factory

Currently, I am in the process of creating a component factory to generate my login form dynamically. Initially, I encountered an issue where the FormGroup was not recognized by the form where I was introducing my component. After resolving that with the h ...

htmlangulartypescriptangular-reactive-forms

Ensuring JS consistently monitors changes in value

Is there an equivalent of (void update) in Unity that is called every frame in Web Development (using JavaScript)? "I want it to continuously check if certain values have changed and then update them accordingly." let governmentprice = parseFloat(select ...

javascripthtmlcss

What are the factors contributing to the slower performance of EF insert compared to plain ADO.NET?

I needed to log web service calls in a database. Initially, I used code-first Entity Framework to define an Entity class and generate a database script. The database structure was simple, with just one table containing columns like Id (primary key), string ...

c#asp.net.netentity-framework

Is there a way to eliminate the grey overlay on images within a Slick Slider carousel using custom CSS?

Currently, I am working on customizing images within a header carousel in WordPress that utilizes slick slider. However, I have encountered an issue where the text overlay, which is originally a bright white font in Photoshop, changes to a dull grey colo ...

csswordpressslick.js

The Chrome developer tools' element inspector doesn't always match up with the element as it

While inspecting the following navbar in Chrome's element inspector, it appears that the highlighted elements are not rendering where they should be. What is causing this discrepancy? Visit this link to see the code (too lengthy to include here) Thi ...

htmlcssgoogle-chrome

How do you implement radio button logic within an *ngFor loop?

When I populate options in a form with radio buttons, I am not seeing isChecked set to true when I select an option. Am I missing something in the following Angular code? app.component.html <div class="form-group"> <label>answerOption</la ...

javascripthtmlangulartypescript

SelectionList values and display options

I'm currently utilizing jquery to populate a dropdown list in ASP.NET MVC $(function () { $.getJSON('/GetFoo', function (result) { var ddl = $('#foo'); ddl.empty(); $(result).each(function () { ...

jqueryasp.netajaxasp.net-mvcasp.net-ajax