CODEWITHSUNDEEP
htmlcssdom
SQLisNotMyFriend
SQLisNotMyFriend

Reputation: 25

Positioning one element next to a non-neighboring element with only css?

<header>
  <div>
    <h1>Title</h1>
  </div>
  <div id="nav">
    <nav>
      <ul>
        <li>foo</li>
      </ul>
    </nav>
  </div>
</header>
<div id="main">
  content!
</div>

I have the following page layout, where the title div renders across the top of the window, then div#nav renders below it, and div#main renders below it:

<body>
    <header>
        <div>
            <h1>Title</h1>
        </div>
        <div id="nav">
            <nav>
                <ul>
                    <li>foo</li>
                </ul>
            </nav>
        </div>
    </header>
    <div id="main">
        content!
    </div>
</body>

Is it possible, using only CSS and without changing the DOM, to position the div#nav (or its child nav element) to the right side of div#main?

Upvotes: 1

Views: 32

Answers (2)

Mihai T
Mihai T

Reputation: 17697

you can do it with position:absolute
check this jsfiddle

code :

header { 
    position:relative;
    float:left;
    width:100%;
    background:blue;
}
#nav { 
    position: absolute;
    right: 0;
    background: yellow;
    top: 100%;
    width: 50%;
}
#main {
    background: red;
    float: left;
    width: 50%;
}

Upvotes: 2

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

Yes you can do it like this, https://jsfiddle.net/Lddyn573/1/

header > div{width: 100%; background-color: lightblue}
header > #nav{float: right; width: 50%; background-color: lightgreen}
#main{float: right; width: 50%; background-color: lightpink}

Upvotes: 2

Related Questions