CODEWITHSUNDEEP
htmlcssresponsive-design
tcornell05
tcornell05

Reputation: 43

Responsive Header Issue

Being more of a backend developer, I'm finding myself having some trouble with the header I'm working on (HTML/CSS only). Fiddle: http://jsfiddle.net/yoom1jvw/

.container{
  margin:0 auto;
  text-align:left;
  height:auto;
  width:95%;
  min-width:1000px;
  max-width:2000px;
  background-color:white;
}

As you can see the min-width of the container in 1000px before it stops responding to the change

My issue: The yellow box keeps collapsing under the grey box, and the grey box collapses under the green when responding to the width of the browser.

My Goal: Instead of the boxes collapsing under one another, I want the header to start removing the spaces in-between the boxes and also the search bar to slowly get smaller.

The search bar does respond a little, but I can't seem to figure out how to get the margins between the boxes to do the same. If anyone could point me in the right direction I'd really appreciate it!

NOTE: You will have to expand the fiddle quite a bit since we are dealing with wide resolutions.

Thanks!

Upvotes: 0

Views: 94

Answers (2)

Kwiksilver
Kwiksilver

Reputation: 855

I'm not too sure what you wanted.

However, I am sure you can change this to suit your needs

<!DOCTYPE html>
<html>
<head>
 <style>
  #header{
   margin:0px auto;
   width:95%;
   height:80px;
   background-color:blue}

 .container{
  display:block;
  float:left}

  .block{
   display:block;
   margin:0px auto;/*all blocks are centered in their container*/
   max-width:100%}/*so a block can be greater than its container*/

  #container1{width:20%}/*all the percentage must add up to 100%*/ 
  #container2{width:20%}/*these are the widths of all the containers in %*/
  #container3{width:10%}/*container3 is smaller than container4 by 20%*/
  #container4{width:30%}
  #container5{width:20%}

  #block1{
  background-color:black;
  width:200px;
  height:60px;}

 #block2{
  background-color:white;
  width:300px;
  height:50px}

 #block3{
  background-color:green;
  width:100px;
  height:70px}

 #block4{
  background-color:grey;
  width:400px;
  height:60px}

 #block5{
  background-color:yellow;
  width:200px;
  height:50px}
 </style>
</head>
<body>
 <div id="header">
    <div id="container1" class="container"><!--container for block-->
        <div id="block1" class="block"></div><!--Actual Block-->
    </div>

    <div id="container2" class="container">
        <div id="block2" class="block"></div>
    </div>

    <div id="container3" class="container">
        <div id="block3" class="block"></div>
    </div>

    <div id="container4" class="container">
        <div id="block4" class="block"></div>
    </div>

    <div id="container5" class="container">
        <div id="block5" class="block"></div>
    </div>
</div>   
</body>
</html>

Note: all containers could be the same % width, therefore you would not need all the extra ids just make sure they add up to 100%

here is it live http://jsfiddle.net/6wpoecg3/

Upvotes: 0

El Devoper
El Devoper

Reputation: 1093

short calculation with min-widths:

container= 1000px;
_________________________________
logo: 200px
search: 20% of container = 200px
btn-main: 200px
main-nav: 400px
login-box: 100px
---------------------------------
1100px + space between boxes

Your main problem is that you can't arrange about 1150px in a 1000px container ;)

Solution

If you can change some of the boxes widths to fit into the container. You could make the container "position: relative" so you're able to place your boxes in absolute positioning (in percentage) without the margin-left. For example if the width of main-nav would be 250px - http://jsfiddle.net/yoom1jvw/2/

Upvotes: 1

Related Questions