Member Avatar for jsisson2001

Hello,

I'm rebuilding a website, and I need some help with the header.

So far I have a parent div that spans 100%.
I have 2 child divs within it, the first holding a small flash file at a fixed width. I need the second div to expand across what's left of the page, but I'm running into an issue. When the page gets to a certain size, the div bumps itself down. Not sure what I'm doing wrong. I understand the concept of the div doing that, but I don't want it to bump itself down.

Thanks for the help.

  • 2 Contributors
  • 3 Replies
  • 124 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by jsisson2001

Dani AI

Generated

The symptoms shown by (fixed columns on the sides, a non‑floated center that drops when the window gets small) come from the browser laying out floats first and then placing the normal flow block. If the combined fixed widths + the center’s min‑width exceed the container, the center will be forced below the floats. ’s request to "show the code" was helpful — the posted CSS confirms floats plus a center block and a white-space: nowrap hack that can make things brittle.

A modern, robust solution is to make the header a flex container so the center column becomes truly fluid and never gets pushed below the fixed columns. Example:

:root {
  --left: 210px;
  --right: 300px;
}

#masthead {
  display: flex;
  align-items: stretch;
}

#homelink  { flex: 0 0 var(--left); }
#banner-left  { flex: 0 0 50px; }
#banner-center { flex: 1 1 auto; min-width: 210px; overflow: hidden; }
#banner-right { flex: 0 0 var(--right); }

If legacy browser support is required, a reliable float fallback is to give the flexible center explicit side margins equal to the fixed columns rather than relying on floats to create the gap:

/* float-based fallback */
#homelink { float: left; width: 210px; }
#banner-right { float: right; width: 300px; }
#banner-center {
  display: block;
  margin: 0 300px 0 210px; /* right, left match fixed columns */
  min-width: 210px;
  overflow: hidden;
}

Practical tips: remove white-space: nowrap on the container (it forces scroll/clipping), use box-sizing: border-box if padding/borders are present, and use DevTools to watch computed widths and the total available space. If the sum of fixed widths + min‑width still exceeds the viewport, the only remedies are reducing minimums, switching layout (stacking on small screens), or allowing horizontal scrolling. For a concise flexbox primer, see the MDN guide: Flexbox guide.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

show the code you are using

Member Avatar for jsisson2001 
(CSS)

#masthead{
	width: 100%;
	background-color: #AEACAC;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#homelink{
	float:left;
	width: 210px;
	height: 120px;
	cursor:pointer;
	padding-left: 5px;
	clear:both;
}

#banner{
	background-image:url(images/banner.jpg);
	float: left;
	height: 120px;
	overflow: hidden;
}





(PAGE)


<div id="masthead">
	<div id="homelink" onclick="location.href='http://www.moldcontrol.com/'">
  		<script type="text/javascript">
			"Flash Object"
      		</noscript>
  	</div>

	<div id="banner">
	</div>
</div>
Member Avatar for jsisson2001

OK, change of plans. I've set up the header the way I want it now.
Now I still have the issue of DIV wrapping. I have 4 child divs now, the flash, 1 static image, 1 static image (dynamic size with minimum width value), and 1 more static image.

<!-- CSS -->

#masthead{
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	overflow: hidden;
	white-space: nowrap;
	float: left;
	position: relative;
}

#homelink{
	float:left;
	width: 210px;
	height: 120px;
	cursor:pointer;
	padding-left: 5px;
}

#banner-left{
	background-image:url(images/banner-left.jpg);
	float: left;
	height: 120px;
	width: 50px;
	white-space: nowrap;
	overflow: hidden;
}

#banner-right{
	background-image:url(images/banner-right.jpg);
	float: right;
	height: 120px;
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
}

#banner-center{
	background-image:url(Images/banner-center.jpg);
	height: 120px;
	background-repeat: repeat-x;
	width: auto;
	min-width: 210px;
	overflow: hidden;
	white-space: nowrap;
}




<!-- HTML -->

<div id="masthead">
  <div id="homelink" onclick="location.href='http://mylink.com/'">
	<script type="text/javascript">
                 "Flash Object"
        </noscript>
  </div>
 
  <div id="banner-right"></div>  

  <div id="banner-left"></div>
  
  <div id="banner-center">another flash object or animated gif may go here</div>
</div>
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.