The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Padding problem
msucimaster
post May 5 2020, 12:56 PM
Post #1





Group: Members
Posts: 7
Joined: 29-April 20
Member No.: 27,307



Thanks for solving my last problem. I have a new issue that puzzles me.

Inside a div I want to have a colored bar over the full width. Inside this bar I have some text. That text should be to the left with some margin.

It is that margin that gives me a problem. I try to assign it with padding-left. It works for the text. Unfortunately a side effect is that bar grows with the size of the padding and now goes over the boundary of the enclosing div.

What am I doing wrong?

The code I have is:

<div class="subBar">My Text</div>

div.subBar
{ width: 100%;
height: 28px;
margin-top: 20px;
font-size: 20px;
text-align: left;
padding-left:120px;
background: #ee7;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
msucimaster   Padding problem   May 5 2020, 12:56 PM
Christian J   It is that margin that gives me a problem. I try ...   May 5 2020, 02:00 PM
pandy   Note that margin and padding are different things...   May 5 2020, 03:06 PM
Christian J   Note that margin and padding are different thing...   May 6 2020, 05:40 AM
pandy   Doesn't change what it is. And there were marg...   May 6 2020, 11:13 AM
msucimaster   Thanks, that worked for me.   May 6 2020, 12:25 PM
deb1   Please can someone tell me what is padding?   May 7 2020, 02:45 PM
pandy   Padding is inside the box. Margin is outside. Like...   May 7 2020, 05:02 PM
deb1   So basically padding is putting margin around a bo...   May 7 2020, 10:29 PM
pandy   So basically padding is putting margin around a b...   May 8 2020, 02:52 AM
deb1   So for the padding example your saying the item ...   May 8 2020, 07:53 AM
pandy   Not really. :) There's a yellow box and a r...   May 8 2020, 09:46 AM
pandy   Does this help? Padding is space inside the yellow...   May 8 2020, 10:14 AM
pandy   Maybe the red box confuses you. Try this instead. ...   May 8 2020, 10:39 AM
deb1   So tell me if I am correct or wrong. With th first...   May 8 2020, 10:00 AM
deb1   I think I understand the second example better. ...   May 8 2020, 11:09 AM
pandy   Yes, I think you did. :D   May 8 2020, 12:54 PM
deb1   Thank you so much for being patient with me and ...   May 8 2020, 01:09 PM
pandy   You are welcome. Of course you can ask more questi...   May 8 2020, 03:35 PM
deb1   What is the difference between java and javascript...   May 8 2020, 11:06 PM
Darin McGrew   What is the difference between java and javascript...   May 8 2020, 11:16 PM
pandy   I may add that there is no connection between the ...   May 9 2020, 12:40 AM
Darin McGrew   I may add that there is no connection between the ...   May 9 2020, 01:36 AM
deb1   so JS is mainly used within html document... co...   May 9 2020, 02:24 AM
pandy   so JS is mainly used within html document... c...   May 9 2020, 03:04 AM
pandy   deb1, since I pestered you with that yellow box, I...   May 9 2020, 01:51 AM
deb1   nah you never pestered me . its actually the oppos...   May 9 2020, 02:21 AM
deb1   can some one please tell me why div tag is used i...   May 9 2020, 02:11 AM
pandy   No, not without the context. Could be a good reaso...   May 9 2020, 02:22 AM
deb1   can you explain why div tag is used in this exampl...   May 9 2020, 02:29 AM
pandy   can you explain why div tag is used in this examp...   May 9 2020, 03:08 AM
deb1   but why use div in the style section? i thought ...   May 9 2020, 03:33 AM
pandy   That example also looks like a demo. but why us...   May 9 2020, 03:50 AM
deb1   <!DOCTYPE html> <html> <head...   May 9 2020, 03:24 AM
deb1   ahh ok. understood . thank you again   May 9 2020, 03:56 AM
pandy   I added an example for you above, but you answered...   May 9 2020, 04:01 AM
deb1   so the second code is for CSS ...right? the firs...   May 9 2020, 04:13 AM
pandy   Yes. You have to paste it together yourself this t...   May 9 2020, 04:26 AM
deb1   OK. so first i need to know my HTML very well then...   May 9 2020, 05:01 AM
pandy   OK. so first i need to know my HTML very well the...   May 9 2020, 05:24 AM
pandy   I just realized something is wrong with the site. ...   May 9 2020, 05:25 AM
pandy   One thing more. It depends on where you pick up yo...   May 9 2020, 05:37 AM
deb1   can you explain to me what is iframe?   May 9 2020, 07:28 AM
deb1   after i create a basic web page on a topic which ...   May 9 2020, 08:06 AM
pandy   I know I answered this. Must have forgotten to hit...   May 9 2020, 12:26 PM
deb1   Great I am doing my Web page on computers   May 9 2020, 03:22 PM
pandy   Good luck and have fun! :)   May 9 2020, 11:44 PM
deb1   how can i send the file to you ? i am new on he...   May 10 2020, 12:17 AM
pandy   You can attach the file to your post. It's a t...   May 10 2020, 01:03 AM
deb1   check this and let me know if need to improve on ...   May 10 2020, 02:00 AM
pandy   You've done good. Looks like you get it. You ...   May 10 2020, 02:23 AM
pandy   Just a tip. I would use width and height attribute...   May 10 2020, 02:30 AM
pandy   I was. The one to the image with a name consisting...   May 10 2020, 12:37 PM
deb1   Please check my coding and also see the output in ...   May 10 2020, 01:56 AM
deb1   so the only comment is put width and height in t...   May 10 2020, 02:52 AM
pandy   Yup. And correct the errors.   May 10 2020, 03:40 AM
deb1   i didn't understand the errors . Can you plea...   May 10 2020, 04:37 AM
pandy   I thought I already did above. What don't you ...   May 10 2020, 07:02 AM
deb1   You said i should fix the image and the errors. Th...   May 10 2020, 08:10 AM
pandy   But I told you about the three errors above. That ...   May 10 2020, 11:02 AM
deb1   Can you please be specific which url you are refer...   May 10 2020, 11:33 AM
deb1   So then can I write like this: <img src=...   May 10 2020, 12:55 PM
pandy   So then can I write like this: <img src=...   May 10 2020, 02:23 PM
deb1   Off course, because if I don't name the file...   May 10 2020, 03:11 PM
pandy   Thank you. That was nice to hear. :) Right. The...   May 10 2020, 03:43 PM
deb1   Well you said there are three errors which are: 1...   May 10 2020, 11:03 PM
pandy   Well, #2 was just a recommendation, from me. The t...   May 11 2020, 12:30 AM
deb1   can you please explain why not to use alt in the i...   May 11 2020, 12:52 AM
pandy   I did explain it. I'll try to elaborate. Some...   May 11 2020, 01:45 AM
deb1   so in my image can we say alt="laptop comput...   May 11 2020, 01:51 AM
pandy   Yes, I think so. I find it hard myself to come up ...   May 11 2020, 01:52 AM
deb1   i understand. as i said before you explain very w...   May 11 2020, 02:01 AM
pandy   Thanks. I added some more above. I think you can ...   May 11 2020, 02:04 AM
pandy   I just remembered a trick with repeated images tha...   May 11 2020, 02:16 AM
deb1   i have just created a basic html form . can you ...   May 11 2020, 02:44 AM
deb1   i have fixed the errors etc so please check it aga...   May 11 2020, 03:45 AM
pandy   i have fixed the errors etc so please check it ag...   May 11 2020, 01:10 PM
deb1   Please check both, and let me know if there is any...   May 12 2020, 12:47 AM
pandy   The computer one looks fine now. Except the ima...   May 12 2020, 01:31 AM
deb1   for the image i dd what you suggested for the widt...   May 12 2020, 02:39 AM
pandy   for the image i dd what you suggested for the wid...   May 12 2020, 03:05 AM
deb1   ????   May 11 2020, 11:38 AM
deb1   Okay very sorry for disturbing you   May 11 2020, 01:43 PM
deb1   Okay very sorry for disturbing you   May 11 2020, 01:43 PM
deb1   can you give me a graphic program which i can down...   May 12 2020, 03:34 AM
pandy   IrfanView does resizing but is not a full-fledged ...   May 12 2020, 04:00 AM
deb1   when creating a form in html does header tag and t...   May 12 2020, 06:51 AM
pandy   It has nothing to do with the form. HEAD and TITLE...   May 12 2020, 01:05 PM
Darin McGrew   I've been using GIMP for years. It's a fre...   May 12 2020, 02:40 PM
deb1   Thank you darin   May 12 2020, 09:31 PM
deb1   So Pandy, tell me is this right, the very basic s...   May 12 2020, 09:44 PM
pandy   Yes, it is.   May 13 2020, 02:42 AM
deb1   OK. you see i want a job in the html/CSS line so ...   May 13 2020, 04:35 AM
pandy   No idea! :D   May 13 2020, 04:52 AM
deb1   please check the file which says computer drives   May 13 2020, 10:28 AM
deb1   ??   May 15 2020, 09:46 PM
pandy   The zip seems to contain an empty folder?   May 16 2020, 06:22 PM
deb1   now check . let me know what you think about it   May 16 2020, 11:59 PM
pandy   Let's see what the validator says. https://va...   May 17 2020, 07:04 AM
deb1   For error 4, error 8-11 your saying that i have...   May 17 2020, 09:32 AM
2 Pages V  1 2 >


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 6th July 2020 - 12:31 AM