Why is my float going left instead of right?

Question

    @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700&display=swap');
:root{
  --sidebar-flex:1.5;
  --condiv-flex:6;
  --fontsize-p:1.2rem;
  --fontsize-nav:1.6rem;
  --typing-font:3rem;
}

* {
  margin:0;
  padding: 0;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  background: #fff;
  background: purple;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 500;
  color: #999999;
}


.App {
  display: flex;
  width: 100vw;
  min-height: 100vh;
}

/* .condiv class is for the right side content container*/
.condiv{
  background: #fff;

  width: 100%;
  float: right;

  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;

}
@media (min-width: 992px) {
  .condiv {
    width: 75%;}}

/* For Home Page */
.home {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

}

This is a React app and I am trying to get the condiv to float right but its floating left for some reason. I cant tell if another attribute is messing with it but I would appreciate any insight. Ive read that maybe I should separate the condiv and home into 2 different divs but that hasn't changed anything. My div that the condiv home page is:

<div className='condiv home'>
        <img src={profilePic} className='profilepic'></img>
        <ReactTypingEffect className='typingeffect' text={["Hi, I'm Chad"]} speed={100} eraseDelay={700}/>
        <Social/>
</div>

a link to my whole repo can be found here: https://github.com/ChadLei/chadlei

Note: no browser has needed those vendor prefixes in many years. — Rob, Apr 17 '20 at 01:51
I'm using a template from somewhere so I'm not sure what you're referring to, are you talking about everything under float inside the condiv class? — chadlei, Apr 17 '20 at 01:53

score 1 · Accepted Answer · answered Apr 20 '20 at 07:37

1

So From your repo, I noticed that you were using strinctMode strong text which was not letting me to even render your app. as soon as I removed strict mode I got your problem. as solution: If you want to render only social icons at right side of the page then do following:

    .social{
width: 100%;
justify-content: flex-end;
}

if you want to render logo and social both in to right side then apply this one:

.home{
justify-content: flex-end;
flex-direction: row;
}

notice that you were using float along with flex, which css will not allow you to do... for more about flex and float you can visit this question float does not work in a flex container

Keep Coding! Thank you!!

answered Apr 20 '20 at 07:37

Anadkat Bhavik

111
1
6

i don't remember putting strict mode on there, where did you see it? its not just the content that i want flex right actually. my main goal is to have the nav side bar on the left and the content pages (home,about,etc.) on the right side – chadlei Apr 20 '20 at 19:42
so for that u have to apply the same. `flex-start` ll be used instead of `flex-end ` to get it on left side.and remember **float** ll not work with **flex**, for more about flex visit this site http://flexbox.malven.co/ ,u ll get your doubts cleared!! – Anadkat Bhavik Apr 21 '20 at 03:50
do you know how i might be able to make my home page like this: https://colorlib.com/preview/#elen - the content on her home page is centered, but the home page itself is shifted to the right side of the screen. with flex center my content on home page is centered, but i still need the condiv class (home page itself) shift right – chadlei Apr 21 '20 at 23:25
sry bt i didn't got what you are trying to say! ll you please elaborate or for more help ping me in to the chat, I ll help you over there! thanks! – Anadkat Bhavik Apr 22 '20 at 06:21
i fixed that issue actually thanks, but i have a new one.. my home page isn't filling the whole right side for some reason, i updated my github if you don't mind checking it out. I'm not sure how to chat someone? – chadlei Apr 22 '20 at 22:59

score 0 · Answer 2 · answered Apr 17 '20 at 05:01

0

By looking at your code I can find that there may be some possible mistakes.. 1. You are keeping width: 100% so it will cover whole screen as Div is a block tag, so it will cover full width of the screen. 2. You have due to above reason your html content will be in left by default.

Solution: for solution you can reduce the width of the div or you can provide full code here so that we can see that if there is another element which is there in the body or how can we solve that!

Hope this will help, if not then please provide whole situation and yes please do check your browser dev-tool and check that what is happening actually!!

Thank you!

answered Apr 17 '20 at 05:01

Anadkat Bhavik

111
1
6

a link to my whole repo can be found here: https://github.com/ChadLei/chadlei, I'm not sure where else it could be since this is the only file I'm using to style it. the @media for .condiv adjusts the width to 75%, but i guess i could take that out. I appreciate your help! – chadlei Apr 17 '20 at 23:57
app.js is the main file, its a react app, app.css is the styling page – chadlei Apr 18 '20 at 10:11
from here its looking fine,you just check with dev tool in browser – Anadkat Bhavik Apr 19 '20 at 06:50
I'm using chrome, how do i see what's going on? – chadlei Apr 19 '20 at 22:13
i still don't get why float right is causing it to float left instead – chadlei Apr 19 '20 at 22:24
I can not tell you on only written code then, I need some executable from which I can see it on and tell you the exact thing, so if you have that then please give me or tell me i ll install your repo in my laptop to see whats happening!! – Anadkat Bhavik Apr 20 '20 at 05:21
okk I cloned your repo and got your problem, for solution visit my answer – Anadkat Bhavik Apr 20 '20 at 07:27

score 0 · Answer 3 · answered Apr 17 '20 at 17:01

0

Hi I have used your css and following div. It shows on right side perfectly. Please check in other place to find the issue.

 <div className='condiv home'>
     <img src={profilePic} className='profilepic'></img>
 </div>

answered Apr 17 '20 at 17:01

Khabir

5,370
1
21
33

a link to my whole repo can be found here: https://github.com/ChadLei/chadlei, I'm not sure where else it could be since this is the only file I'm using to style it. i appreciate your help! – chadlei Apr 17 '20 at 23:57

Why is my float going left instead of right?

3 Answers3