CODEWITHSUNDEEP
htmlcss
jjw2015
jjw2015

Reputation: 343

Ony use css to move the nav bar to the right in this layout?

I am trying to see if it is possible that only using CSS, we can get this.

The HTML is like (I will simply use class name here to illustrate it):

<body-wrapper>

<logo>
</logo>

<nav>
</nav>

<content>
</content>

<footer>
</footer>

</body-wrapper>

The desired final UI layout should be:

|--------------------|
|      logo          |
|--------------------|
|              |     |
|    content   | nav |
|              |     |
|              |     |
|--------------|     |
|     footer   |     |
|              |     |
|--------------|-----|

Note we don't know the exact height of the logo section.

I couldn't figure out how to make this happen (or whether it is possible or not using only CSS).

Any idea?

Thanks! (PS, if I were able to put a wrapper div that covers nav, content, and footer, then it will be easy to do that. But the current HTML doesn't have that, and I want to see if we can make it work without changing the current HTML)

Upvotes: 2

Views: 47

Answers (1)

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13908

Now that you say that you don't have access to the html DOM, So You can maybe do it as follows.

PS: I know this is absurd, and whacky but we are working on a really edge case here guyz so no room for best practices here. :)

.logo{
  width: 100%;
  float:left;
}
.nav{
  width:35%;
  float:right;
}
.content{
  width:65%;
  float:left;
}
.footer{
  width:65%;
  float:left;
}

JSFiddle

Upvotes: 1

Related Questions