Avatar of Pete Long
Pete Long
Flag for United Kingdom of Great Britain and Northern Ireland asked on

CSS - and DIV Padding

Hi All

I've done some Google searching and cant really find an answer that I'm happy with.

I have a site that is controlled by a couple of CSS files. I want to add a search box on the site (that's fine I just paste in the code for the search).

But I want to put it in a <div> and set the padding etc. on it so i can squeeze/push it so it lines up neatly with other elements on the site.

I know I can declare a DIV ID in the CSS, then reference that on each on my pages, but I don't know the syntax, nor can I work out what I need to do (I'm not a web developer, I do my best to struggle along.)

Here http://www.petenetlive.com/KB/Article/concept.html you can see the search box (the one below all the header/buttons, I need to pop it in a <DIV>, apply padding to the left/Right/Top

My CSS is here http://www.petenetlive.com/PNL-CSS-2-Column.css

What do I need to put in the CSS, and what do I need to put on the page?
If you could explain what the code is doing so I can learn something, that would also be a bonus.

Thanks in advance.

Pete
CSSWeb Languages and StandardsWeb Development

Avatar of undefined
Last Comment
Tm-L

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Tm-L

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Pete Long

ASKER
Thank you for the detailed and well written response!

The search bar at the moment is constrained (length wise) because its in a table (actually I think its in a container not a table).  If I make the div independent of the page will it still be constrained in the same way?
Pete Long

ASKER
Like this, Can I set the dimensions of the DIV?
I might even consider placing it over the main logo at the top if I can place it this accurately!
oops.PNG
Pete Long

ASKER
Also If I resize the page it moves about - so I'm guessing at different resolutions it will appear in different places?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Pete Long

ASKER
from the link yo gave me - I've changed it from  absolute to relative, now I'm making progress
Tm-L

I would stay store a copy of the code currently displaying the search box, and then perform the adjustment as detailed.

from this you will be able to see whats happening now you have placed the search bar in its own independent container. Then you can modify the styles defined in the CSS file for the GSearch ID to mimic the constraints currently in place on the search bar.

Looking at your CSS i think there is a 200px margin acting on your main content area and padding on either side of that div of 20px per side, this is where search bar is contained and this div is within  another div which looks to be set to a width of 1000px.

so.. with the CSS file you would want to mimic this behavior to act upon the div id that relates to the div id used with the search bar (GSearch)

I think first you want to change the Position: tag to relative, and then possible remove the Top and Left tags and replace them with
 margin: 0 0 0 200px; 
 padding: 0 20px;

Open in new window


possibly. Slightly lost with where we are. try the above and let me know how its looking?
Pete Long

ASKER
I've got it nearly there I need to put some padding in the right hand side of the DIV now....
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tm-L

From your CSS i think you had the setting of
padding: 0 20px;

Open in new window

give that a whirl as a place to start?
Pete Long

ASKER
Cracked it!

#GSearch {
 position:relative;
 top:4px;
 left:7px;
 padding-right:7px;
}

Thank you Very Much, you gave me enough information and the right link so I could adapt it to work,

Best Wishes

Pete
Pete Long

ASKER
Give this Expert a Cigar!!!!!!!!!!!!!!!!!!!
Your help has saved me hundreds of hours of internet surfing.
fblack61
Tm-L

I just checked your CSS and page source to see your settings. It looks like you've got it right and hopefully a better understanding of DIVs, IDs, etc. and what can be achieved.

this could've all been done inline (with the html) but you'd have to do it on every page now you can just reference the ID to use the same positioning on any item you wish.

The position tag is very handy, you can double wrap divs so the outer div is static and filling the web page area and then the inner div is relative to the first DIV. Of course you can place as many div inside of each other as you like and have them interacting in different ways.

This is what you have happening at the moment with your site, if you trace back which DIVS are inside which you will see a Matryoshka doll kind of pattern. Which is why setting the position to relative worked for the GSearch DIV position.

I'm happy to help, there are some very cool things you can do with CSS definitely something worth investing time in when it comes to websites!