How do I add a space between my nav section and search box?

[kyptonize]

I’ve been trying to separate these two sections, as the nav link titles that pop up get in the way of the search bar and make it almost impossible to type there. This is what it looks like:

What can I do to fix this? This is my current setup:

<div class="navigate">
<a href="/"><div class="n2"><div class="nav"><div class="navt">▲</div>reset</div></div></a>
<a href="/ask"><div class="n3"><div class="nav"><div class="navt">▲</div>ask</div></div></a>
<a href="/archive"><div class="n4"><div class="nav"><div class="navt">▲</div>archive</div></div></a>
<a href="leavingthisblank"><div class="n5"><div class="nav"><div class="navt">▲</div>theme</div></div></a>




<form onsubmit="return handleThis(this)">
<input type="text" name="number" value="Search my tags!" style="width:130px; height:10px; 
    background-color:#f5f5f5; 
    color: #000; 
    font-size: 8px; 
    font-family: calibri, helvetica, arial; 
    border: 0px 
    text-transform: uppercase; 
    margin-top: 0px;
    color: #999;
    letter-spacing: 1px; 
    padding: 4px 8px;   
    solid #fff;"/>
</form>

[TechnoBear]

Welcome to the forums, @kyptonize.

You haven’t provided enough code to allow us to reproduce what you’re seeing. (And what you have posted looks very odd to me, and I’m having a hard time picturing how it’s intended to behave.)

Do you have a link to a live page we can look at?

[TechnoBear]

That area is so small on my screen that it’s pretty much unusable. However, if I’ve understood what you’re asking, adding a bottom margin to the div .n4 seems to do the trick. e.g.

.n4 {background-color: #ce947f;
    margin-bottom: 25px;
    }

[SamA74]

The usual way to create a gap between elements is to use margins.
But I don’t see a closing tag for the <div class="navigate"> element which makes the form a part of that element, is this intended of a mistake?

[kyptonize]

Unfortunately, it seems as if whenever I try to place the closing tag at the end, the whole content section gets messed up and put off to the side. Is this to be expected, or is there something wrong?

[SamA74]

It’s hard to say without seeing it all in context.
But looking at the code I can see, there is room for improvement.
Needless to say, you must have a closing tag somewhere. If the layout is depending in the html being invalid with missing tags, there is certainly something wrong.

[kyptonize]

Where exactly would I have to put that? I’ve been trying to put it in a few spots after the div class n4, but the code keeps showing up as the final product on the site. Sorry again, this is probably something easy to figure out but once again I have basically no knowledge of coding haha.

[kyptonize]

Ah, it seems as if it was just a loading error, so the closing tag works fine now. I still haven’t figured out how to space it correctly though, as whenever I try to place a margin it shows up on the site.

[TechnoBear]

I’ve no idea how one would edit a tumblr page, as it’s not something I’ve ever worked with.

Normally, you would simply add the margin-bottom rule to the existing rule for the .n4 div. However, if you’re adapting an existing theme, them I’m guessing you should be creating a child theme to make the changes. Hopefully, somebody else can give you more guidance here.

[kyptonize]

I see, haha. Thank you for trying to help anyways, your advice is much appreciated. It’s an existing theme provided by a developer who gives codes publicly for free, so I’ve just been trying to help my friend figure out how to add the search bar, is all. Anyways, once again thank you for the help!