Hello,

I am trying to write css code that would fill the whole code of width.

http://www.innovation.web.id/

Do know how to make my navigation bar and footer bar fill the whole width of the web browser? or adjust to any web browser size without horizontal scroll?

Thanks in advance.

Recommended Answers

All 3 Replies

For starter, don't use fixed px widths on your #container (1024px) and your #navigation (1050px).
Block-level elements such as a div will fill by default (auto) the full width of the window or it's containing element if you don't set a width in your CSS.

By the way... you're still on bloody slow server. It took ages to load everything.

I work it offline meanwhile.

I appologize my online webpage - uses Indonesian webserver (which I prefer compare to USA web server, since most of my clients lives in Indonesian). It only moves fast in Indonesia and slower in International - I could only pick one choice not both) - please tolerate this thanks.

Anyway, I don't think it makes lots of difference though. I already fix the footer and not the navigation bar. Any idea - how to make the navigation bar full width?

I already try changing the width to auto or delete it and still the navigation bar does not change or show up.

Please help. Thanks.

You're making it for yourself already complicated with a HTML structure like this for your navigation bar.

<div id="coffee"><img src="images/coffee.jpg" width="130" height="120"></div>


<!-- navigation -->
<div id="logo"><img src="images/logo.png" alt="logo" width="200"></div>

<div id="navigation"></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>

    </li>    
<li class="service"><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

Visually, thus on the screen, it looks like these div tags are nested in a wrapper div, but they're not. All you did was position them ontop of each other with CSS fixed positioning and odd margins. And still all this hard coded <br> tags used for spacing.

Davy, before you want to sell services such as web design/development to clients, you really need to take a huge amount of steps back and start with the basics and that is learning HTML & CSS the proper way.
So before this thread ends up again in a thread with 40+ posts, I strongly advice you to start at the begining. Learn to walk before you can run!

http://learn.shayhowe.com/html-css/

commented: If only... :) Water and horse spring to mind +15
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.