Parent div not wrapping child div when screen is resized

Question

I'm trying to learn HTML/CSS and JavaScript+jQuery by using Codeacademy and working on my own little project to practice. However, I am stuck with a very simple problem:

I want a parent div to be displayed across the entire page. I can do this successfully (see fiddler). When I resize the browser screen, however; my parent div no longer fits across the entire page, which causes its right most child div to be displayed outside of the parent div (see fiddler). Basically, I want my parent div to always wrap its child divs, and to always be displayed across the entire screen.

Fiddler Links:

Relevant HTML:

<div id="topnav">
            <a id="logo" class="navlink clearfix">DreamTeam</a>
            <a id="logo" class="navlink clearfix">Strikers</a>
            <a id="logo" class="navlink clearfix">Midfielders</a>
            <a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a>
            <a id="logo" class="navlink clearfix">Goalkeepers</a>
        </div>

Relevant CSS:

/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}

#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}

#lastlink {
border: none;
}

/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto; 
font-size: 24px;
text-align: left;
line-height: 65px; 
width: 175px;
border-right: 1px solid #bdbdbd;
}

Any help would be appreciated. I've gone through many Google searches and other stackoverflow posts, but nothing seems to work for me unless I completely missed an appropriate post. Using things like "overflow: hidden" or creating a wrapper div didn't really work for me. Thank you in advance for any suggestions. It would be great if anyone could point me to an appropriate post that I might have missed too.

You don't want to wrap block-level elements (div) inside inline level elements like a. And there is no such thing as float:top, as far as I know. — bouscher, Jun 27 '13 at 09:00
In HTML5 (post is tagged with it) it's allowed I believe to use a block element in an inline element. I wouldn't recommend it tho. — GreyRoofPigeon, Jun 27 '13 at 09:02
I really appreciate the feedback @slash197 , wont be making that mistake moving forward. Unfortunately not the solution to my problem though. — dmarquez, Jun 27 '13 at 09:09
@otinanai I can't attach screenshots since I just started using my profile. :/ — dmarquez, Jun 27 '13 at 09:11
@dmarquez Either edit your question and remove the "see screenshot" or please post a fiddle so we can clearly identify what the problem is. — otinanai, Jun 27 '13 at 09:15
I added the fiddler link: http://jsfiddle.net/dmarquez/Q4KGy/embedded/result/ , http://jsfiddle.net/dmarquez/Q4KGy/ @otinanai — dmarquez, Jun 27 '13 at 09:30
@boushcer overflow: scroll; seems to be the best solution at this point. Ideally I would like to have to scroll the entire page to the right to see the rest of the topnav instead of scrolling the top nav only. I really appreciate the suggestions though. — dmarquez, Jun 27 '13 at 09:40
@dmarquez: i see you have float:top; in your parent. There is no 'float:top'. you can float left,right,inherit or none. You might want to correct it. — Madeyedexter, Jul 21 '13 at 09:24

score 0 · Answer 1 · edited May 23 '17 at 11:56

How about get rid of the div tag inside a tag. Because you can use class with a tag.

Look at the following example provided by StackOverflow user starx

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

Click here for more details

score 0 · Accepted Answer · answered Jun 28 '13 at 18:43

I managed to find a solution to my problem. The problem was not my invalid markup; it was actually the CSS for my #topnav ID. Here's how I changed that ID to get the result I wanted:

#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}

The key changes are below the height property.

Parent div not wrapping child div when screen is resized

2 Answers2