Cause & lt; DIV & gt; content to spread?

advertisements

Imagine I have a navigation bar in my page header, with a number of links. I'd like the links to spread out horizontally to fill the parent ; is there a way to do this using CSS which doesn't rely on me hard-coding based on the number of links? e.g if I add or remove a link I'd like it to still work.

I tried:

<div class="navBar">
    <a class="navBtn" href="#" >Home</a>
    <a class="navBtn" href="#" >Services</a>
    <a class="navBtn" href="#" >About us</a>
    <a class="navBtn" href="#" >Blog</a>
    <a class="navBtn" href="#" >Contact</a>
</div>

div.navBar
{
    text-align:justify;
}
a.navBtn
{
    font-style:italic;
}

But this just left-aligns the text. I know I could use a table but just to show I can, I'm trying to do it 'properly'. Or, is this a case where a table is 'proper'?

Text-align: justified;

Related Articles

grep to get & lt; div & gt; contents

Assume i have a file t1.txt <div class="content"> main </div> <div class="data"> 100 </div> If i run grep -o "content.*</div>" t1.txt it will return content"> main </div> <div cl

Each function for all divs with content

I have multiple divs as follows; <div class="error"></div> <div class="error">foo</div> <div class="error">bar</div> <div class="error"></div> <div class="erro

#services div has content but appears as empty div

My #services div has content wrapped inside, but when I wanna give display it's borders or give it a background, it appears as an empty div. What's the trick here? Looks like it works well in the snippet, but here is the way it appears: http://laszlo

Scroll div 100% of content, without spreading down

I have the following jsfiddle: https://jsfiddle.net/06apx88q/1/ There is a sidebar which can be expanded by clicking on the "show notifications" button. I need this sidebar to take up 100% of the width; from the navbar at the top to the bottom o

Scrolling outside the div scrolls content

How may I do the trick to scroll outside of the div and action will be assigned to the fixed div with hidden overflow in my case is #scrollable_content. HTML <div id="container"> <div id="header">Header</div> <div

Add a link on a Div without content

I have a grid of divs created with Flex, the divs are empty, the only one thing I would like to do is add a link on these divs (on the single images, every image should have a different link). I tried to add a link on a div in HTML but the div disapp

CSS div width - content width only ...?

I'm trying to get my div to be the width of my content, I can get it working in all the other browsers except for IE, using: div#quoteHolder { height: 85px; display: inline-block; } Does anyone know how to fix this in IE? Oh and this is the html code

Asp.net - How to get dynamically divided div block contents

I am fairly new to asp.net and I am trying to get the content of a div block, that its content is is changed at run time. When user click on Button1 (asp:button) I would like it to retrieve the whole content (not just default content) of frm_div and

How to make a DIV without content has a width?

I am trying to add a width to a DIV, but I seem to be running into a problem because it has no content. Here is the CSS and HTML I have so far, but it is not working: CSS body{ margin:0 auto; width:1000px } ul{ width:800px; } ul li{ clear:both; } .te

Change the div or content of the div?

The page that I am referring to is this one: http://www.plummerwigger.albanystrategicmarketing.com/ I'm trying to move the "Current Clients" section at the bottom up and to the right of the div that includes the seal, paragraph and news (i.e.: c