Trouble encountered in positioning div elements

I'm struggling to design a basic CSS layout for my website built using ASP.NET. However, I'm encountering some challenges in aligning the Divs as desired.

My goal is to achieve the following layout:

Please take note that the content on the right side, including the text in .container and .wrap, should extend all the way to the right without any gaps.

Below is the snippet of my html code:

<div id="container">
    <div class="header">
        <img src="http://wiki.myexperiment.org/images/MyExperiment_logo_5016x960_trans.png" id="logo" /><div id="name">Welcome, John Smith</div>
        <div id="logout"><a href="logout.aspx"><img src="http://s3.postimg.org/kpgjd1wi7/logout.png"/></a>
        </div>  
    </div>
</div>
<div class="container">
    <div id="left">Left Wrap</div>
    <div id="wrap">
        <div id ="topWrap"> Top Wrap
        </div>
        <div id="leftWrap"> Left Wrap
        </div>
        <div id="rightWrap"> Right Wrap
        </div>
    </div>
</div>

And, this is my corresponding CSS styling:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

html {
    width: 100%;
    height: 100px;
    font-family: 'Open Sans', sans-serif;
    color: white;
}

body {
    background-image: url('http://s27.postimg.org/48jitw07n/Background_3_Darker.jpg');
    background-repeat: no-repeat;
}

.header {
    left: 0px;
    top: 0px;
    position: fixed;
    height: 76px;
    background-color: black;
    margin-bottom: 25px;
    width: 100%;
    opacity: 0.5;
}

#logo {
    float: left;
    margin-left: 5px;
    padding-top: 9px;
    width: 300px; 
    height: 50px;
}

#name {
    float: right;
    margin-right: 100px;
    display: inline-block;

}

#logout {
    float: right;
    padding-top: 19px;
    display: inline;
    margin-right: 35px;
}

.container {
    margin-top: 50px;
    width: 100%;
    height: 100%;
}

.left {
    position: relative;
    float: left;
    margin-top: 50px;
    width: 10%;
    height: 400px;
    background-color: #B9D7D9;
    margin-bottom: 10px;
}

#wrap {
    margin-left: 12%;
    width: 100%;
    height: 400px;
    position: relative;
}

#topWrap {
    width: 100%;
    height: 50%;
}

#leftWrap {
    width: 50%;
    height: 50%;
    margin-left: 5px;
    display: inline-block;
}
#rightWrap {
    float: right;
    margin-right: 5px;
    display: inline-block;
}

Unfortunately, the output is not turning out as I expected it to be.

Here's the current output.

Can anyone provide any tips on how I can properly align the divs?

htmlcssasp.net

Answer №1

There are a few things that require attention, particularly the missing closing <div> tag, and some inconsistencies with id and class selectors in both the HTML and CSS.

It seems like you've put in a lot of effort, so I've laid the groundwork for what you need based on your existing CSS. Hopefully, this will provide some clarity and help you get started.

UPDATED JSFIDDLE AS WELL AS FULL DEMO

One key point to mention is that I introduced a #user wrapper around #name and #logout to simplify the positioning.

Also, I utilized the clear fix technique, incorporating class="cf" in the markup.

<div id="header" class="cf">
    <img id="logo" src="path/to/logo.png" />
    <div id="user">
        <div id="name">
            Welcome, John Smith
        </div>
        <div id="logout">
            <a href="#"><img src="path/to/logout.png" /></a>
        </div>
     </div>
</div>

Feel free to leave any comments or questions.

Answer №2

After closing your divs, I noticed a few immediate issues:

  • Your CSS references .left, but your HTML does not have any elements with class="left". Instead, you have id="left", so your CSS should be updated to #left.
  • Using both inline-block and float on the same element is not recommended as they are different display types. The "float" property implicitly sets display: block. Consider using the following CSS instead:

http://jsfiddle.net/ryanwheale/e60c3zt0/4/

    #leftWrap {
       float: left;
       width: 50%;
       height: 50%;
    }
    #rightWrap {
       float: right;
       width: 50%;
    }

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

Scrolling to the active list item in the navigation bar

Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...

javascriptjqueryhtml

Establish a variable in XSL to define the tabIndex

My XSL code has been designed to read an XML file and generate input elements of type text for each child node. The XML file structure is as follows: For node c, two input boxes are created in the format: Label(com 1) :input box--------------------- Label ...

javascripthtmlxslt-1.0

CSS animation shifting while altering its color palette

I have limited experience with CSS animations and my client is looking to achieve a hover effect similar to the one shown here when hovering over the contact button: Just to clarify, they are looking for: The square to move from left to right and then b ...

csscss-animations

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

javascripthtmlcss

Is full support for CSS 3D transforms (preserve-3d) provided by IE11?

Creating a web app utilizing css 3d transforms, my goal is to have IE11 support if feasible. I am aware that IE10 does not endorse the preserve-3d value for the transform-style css attribute, however, there seems to be conflicting information regarding I ...

htmlcsscss-transformsinternet-explorer-11

Managing the versions of ViewState and serialized objectsIs this what you

We utilize ASP.NET viewstate to store custom objects (as opposed to only primitive types). With each build, the build number undergoes incrementation. The challenge we face arises during a server update: Visitor loads the page We roll out a fresh build o ...

asp.net.netjsondeploymentviewstate

Searching for a demonstration of integrating Lucene.net into an ASP.NET project

Does anyone have experience with integrating the search features of Lucene.net into an asp.net application? Any helpful resources or sample code would be greatly appreciated. ...

asp.netlucene.net

An issue occurred while attempting to hover over the text in the SVG map

I have a United States map. This code contains CSS for styling the map with different colors for each state. It also includes an SVG image of the map and text labels for each state name. However, there is an issue with the hover effect on the state name ...

htmlcsssvghover

Internal VS External Stylesheets: What you need to know

I'm currently in the process of developing a website and I have started utilizing the style tag at the beginning: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

htmlcssstyles

What is the strategy used by jQuery to select elements by class name?

Is there a "getElementsByClass" function in JavaScript? If not, how does jQuery manage to do it without looping through all elements which would be very inefficient? Also, how can I specify CSS for elements with two or more classes? <a class="one two ...

jquerycssdom

What could be causing me to receive null when trying to retrieve an element with document.getElementById, even after invoking $(document).ready(function() { ... })?

Here's a small example. I'm feeling a bit rusty with JavaScript, as it's been some time since I last worked with it. The problem I'm encountering is an error in Chrome developer tools: "Uncaught TypeError: Cannot set property 'src ...

javascriptjqueryhtml

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

A step-by-step guide on customizing the background color of a Dialog in Angular Material (Version 16)

I've been attempting to modify the background color of my Angular Material Dialog by utilizing the panelClass property in the MatDialogConfig. Unfortunately, I'm encountering a partial success. I am aiming to set the background color as red (jus ...

cssangulartypescriptsassangular-material

Selenium was unable to find the p tag element on the webpage

I apologize for reaching out to you all for assistance with such a basic task, but I have tried everything in my toolkit and still can't seem to figure it out. I've experimented with partial xpath, full xpath, and various CSS selectors. I am see ...

jquerycssseleniumxpath

What is the best way to display the entire background image in a jumbotron?

After some experimentation, I discovered that by increasing the amount of content I have, it displays the full background image. Is there a clean and efficient way to achieve this? <div class="jumbotron jumbotron-fluid" style="background: url('./a ...

htmlcsstwitter-bootstrapimage

Use jQuery to switch back and forth between two different sets of classes

I am attempting to switch between two different sets of classes using jQuery. My goal is to change from one custom icon to a font-awesome icon upon clicking an element. While I have been successful in changing a single class, I am facing challenges when tr ...

javascriptjqueryhtml

What could be causing the value not to display in my range slider thumb tooltip?

In a recent project of mine, I implemented a range slider with two thumbs - one for setting the minimum value and one for the maximum value. The goal was to provide users with a visual representation of the range they are selecting by displaying the thumb ...

javascripthtmlrangesliderbootstrap-5

Styling the CSS to give each grid element a unique height

I am working on a grid layout with three columns where the height adjusts to accommodate all text content. .main .contentWrapper { height:60%; margin-top:5%; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px; /*grid-te ...

htmlcssalignmentcss-grid

My images are receiving a hidden style display none from Bootstrap js

My images are not loading properly when using Bootstrap v5 on my website. I have no issues with images in other parts of the site. This is the HTML code I am using for the image: <img border="0" src="example.com/img/kitties-long.png" ...

javascriptjquerycsshiddenbootstrap-5

Customizing Body Color in CKEditor for Dynamic Designs

I am facing an issue with CKEditor that I am hoping to find a solution for. My scenario involves using a jQuery color picker to set the background color of a DIV element, which is then edited by the user in CKEditor. However, I have observed that it is not ...

javascriptjquerycssckeditor