- This topic is empty.
-
AuthorPosts
-
July 14, 2013 at 12:58 am #46379JunniMember
how can we convert % to pixels
am using
`
(100%) (85%)>`
i want to convert that 85% to pixels how can i do that?
July 14, 2013 at 3:22 am #142717Paulie_DMemberYou can’t…not without javascript.
…and in any case, why would you want to?
July 14, 2013 at 6:56 am #142735JunniMemberactually am having trouble with my site, am using first sction with 100 % and in it a div with 85% and in it there are two divs one flaot left and the othr is float right, i dont know y but on low resolution left div is on left but the right one is under it so
July 14, 2013 at 9:20 am #142746Paulie_DMemberChanging it to px won’t help….there is clearly something more basic wrong.
Could you show us the problem…perhaps in Codepen?
July 14, 2013 at 3:24 pm #142793Eric GregoireParticipantWell if the divs inside the 85% div are a fixed width in px, that could be your problem. Try making them a percentage that adds up to under 100% or equal to. If there are any margins or padding on the left or right of them, you could make those percentages as well and make sure the width, margin, and padding values all add up to under 100% or equal.
You may want to avoid any min-width values as well if you’ve specified any.
July 14, 2013 at 3:41 pm #142797SilverSerpentParticipantAre you saying you want something like this? http://cdpn.io/AGIuq
July 14, 2013 at 9:44 pm #142857JunniMember@Boogiesox yess the Div inside 85% ‘s div there are two divs first one is 50% and second one have 400px width.
am trying to make it available to Codepen just wait a little bit @Paulie_D
July 14, 2013 at 9:53 pm #142860JunniMemberhttp://codepen.io/anon/pen/umyIw
here you go @Paulie_D
July 14, 2013 at 9:55 pm #142861JunniMemberNow you can see if the Screen Width is full then it is good but when you Change Resolution then the text will go down to the picture
July 14, 2013 at 10:13 pm #142868SilverSerpentParticipantYour problem has to do with the 400px. 400px is fine at a large screen size, but once the container gets down to less than 800px wide then it breaks. This is because you have your left column set at 50%, but at less than 800px wide the 400px column takes up more than 50% of the space, meaning there isn’t room for both of them.
You can either convert them both to percentages that add up to 100% or less, or use the flexbox capability to make the right column take up 400px and then the left column to fill the remaining space. Either way, you’re going to have to compromise on one of the two columns.
July 15, 2013 at 9:15 am #142961Eric GregoireParticipantIf you change the column with the image to a percentage width, you could also set the width of the image inside it to 100% of the column and set height to “auto” so it scales with the column.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.