# Unable to Solve this

**URL:** <https://discourse.mozilla.org/t/unable-to-solve-this/90220>\
**Category:** MDN\
**Tags:** learning\
**Created:** [December 14, 2021, 10:21am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220 "2021-12-14T10:21:17Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![shubhampandey](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@shubhampandey](https://discourse.mozilla.org/u/shubhampandey)\
**Post date:** [December 14, 2021, 10:21am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/1 "2021-12-14T10:21:17Z")

</div>

Float → Slidebar  
You have probably visited a website that has at least one sidebar. Some are very simple and others are more complex, but the goal is the same. In this exercise, we will learn how to create a very simple sidebar layout.

To achieve this you need to add the `float` property in two elements so they look like the image below.

 ![ScreenHunter 34](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/0/e/0ebaf2765f6ea0bbc73b4059d53add8d40dc0b53.png)

You can follow these steps if you are struggling:

- Assign the classes to each of the divs (the order matters).
- Do not remove the `mid-element` class from the two middle divs, use space to separate each class.
- Notice in the image that there is a space between the Main Content and the Side Bar.
- These are the classes that you need to add to the elements: `header` , `main-content` , `side-bar` and `footer` .

Looking for some help how to achieve this image result.

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [December 14, 2021, 11:27am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/2 "2021-12-14T11:27:37Z")

</div>

Hi @shubhampandey and welcome to the community 👋

Could you please post a link to the task?  
Guessing from your description I would say that the “Main Content” element needs `float: left;` in its CSS and the “Side Bar” needs `float: right;`

I hope that helps!

Have a nice day,  
Michael

PS: Your email address is visible in your post. I think it somehow ended up in the optional “name” field of your profile. I recommend removing it.

---

<div class="post-metadata">

**Author:** ![shubhampandey](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@shubhampandey](https://discourse.mozilla.org/u/shubhampandey)\
**Post date:** [December 14, 2021, 11:36am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/3 "2021-12-14T11:36:38Z")

</div>

@mikoMK Thanks for your reply 🙂

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [December 14, 2021, 11:54am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/4 "2021-12-14T11:54:32Z")

</div>

Thanks! Since I don’t have an account there, I can’t see the given source code but yes, the `float` properties I wrote above seem right. Don’t forget to also add appropriate classes to both elements like `<div class="mid-element main-content">Main Content</div>`

---

<div class="post-metadata">

**Author:** ![shubhampandey](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@shubhampandey](https://discourse.mozilla.org/u/shubhampandey)\
**Post date:** [December 14, 2021, 11:56am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/5 "2021-12-14T11:56:03Z")

</div>

Yes ! Thanks for the prompt help !

Stay safe ! Have a good day 🙂

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [December 14, 2021, 11:56am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/6 "2021-12-14T11:56:51Z")

</div>

You are welcome! 🙂  
Stay safe, too!

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [December 14, 2021, 7:48pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/7 "2021-12-14T19:48:27Z")

</div>

Hello @shubhampandey  
is that from [https://hyperskill.org](https://hyperskill.org) course or i am wrong if yes then i have account there just give me the link to the task

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [December 14, 2021, 7:55pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/8 "2021-12-14T19:55:08Z")

</div>

I saw you commenting there in this task. You are active EVERYWHERE 😁  
I even saw you on the Rocky Linux forum 😅

They removed the link from a previous post. It’s here: [https://hyperskill.org/learn/step/12703#comment](https://hyperskill.org/learn/step/12703#comment)

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [December 14, 2021, 8:04pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/9 "2021-12-14T20:04:19Z")

</div>

lool are you tracking me 😂

are you on rocky also ?

thanks boss i will check it

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [December 14, 2021, 8:10pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/10 "2021-12-14T20:10:13Z")

</div>

lol i saw my comment just on the next comment to her 😂

i find that the last comment she said  
`got it ! please remove your comment !` so i guess she got it

did you got it @shubhampandey or you still need more help

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [December 14, 2021, 8:15pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/11 "2021-12-14T20:15:54Z")

</div>

I just have to migrate one CentOS 8 server and was curious what’s going on the Rocky forum. Clicked through some posts and then I saw “justsomeone” and thought: “Wait a minute, I know this guy!” 😁

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [December 14, 2021, 8:20pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/12 "2021-12-14T20:20:34Z")

</div>

next time when i want to hide i will name myself  
iamNotJustSomeOne 😂 😂😂 i used centos 8 before migrating also  
glad to see more linux users 😂

now i will annoy you if i have question about linux also 😂

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [December 14, 2021, 8:25pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/13 "2021-12-14T20:25:38Z")

</div>

> [@justsomeone](#):
>
> i will name myself  
> iamNotJustSomeOne

Noted down… 😄

---

<div class="post-metadata">

**Author:** ![shubhampandey](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@shubhampandey](https://discourse.mozilla.org/u/shubhampandey)\
**Post date:** [January 9, 2022, 8:21am UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/14 "2022-01-09T08:21:09Z")

</div>

Looking for help for this exercise.  
Write a page that contains three paragraphs `<p>` (all without quotes):

1. id = “main-information”, text — “Main information”;
2. id = “history”, text — “History”;
3. id = “tours”, text — “Tours”;

Add a navigation block to the page using `<nav>` . The navigation should contain three links (one per paragraph), each with the same text as in a paragraph. All the links should have `title` attributes that match their text. The title of the page should be `Great Britain` .

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [January 9, 2022, 5:43pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/15 "2022-01-09T17:43:26Z")

</div>

Could to tell us which part you have problems with?  
Please share your current work in an online editor like [https://codepen.io](https://codepen.io). Then we can tell your how to improve your code specifically. Otherwise this just sounds like we are solving exercises for you 😐

Cheers,  
Michael

---

<div class="post-metadata">

**Author:** ![shubhampandey](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@shubhampandey](https://discourse.mozilla.org/u/shubhampandey)\
**Post date:** [January 9, 2022, 8:09pm UTC](https://discourse.mozilla.org/t/unable-to-solve-this/90220/16 "2022-01-09T20:09:26Z")

</div>

finally solved with my effort.