CODEWITHSUNDEEP
htmlcss
user5831063
user5831063

Reputation:

How to cut divs both ways to keep the objects in center?

I am trying to build a nav-bar that stays on top, fixed and in the middle. But if the screen size is large enough some unused space can be used left and right according to my needs and also there's a bit of space in the middle.

Now, if someone resizes the browser window, I need to start stripping off the unused space from the screen and keep only the essential divs of the parent div.

For reference have a look at Facebook's Desktop navbar.

How do I achieve this with html and css?

Also, if someone resizes so much that the objects will be affected anyway, I would want them to just getting cut off the screen without altering their positions.

<html>
<head> <style>
.navbar {
position:fixed;
background: #000;
height: 30px;
width: 100%}
.logo_div{
margin-left:7%;
float:left;
width:32px;
display:inline-block;
height:32px;
}
.search_div {
width: 450px;
display: inline-block;
margin-left:15px;
float:left;
}
#search_box {
width:100%;
border-radius:5px;
border:1px solid #819597;
padding:4px;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
border-right:none;
height:24px;
font-family: Arial;
font-size:16px;
font-weight:lighter;
outline:none;
}
#search_box:focus {
border-right:none;
background-color:#FCFCDA;
}
li {
text-decoration:none;
padding:5px;
padding-bottom:0px;
margin:1px;
margin-top:0px;
list-style:none;
display:inline-block;
}
.menu {

padding:3px;
float:left;
display:inline-block;
padding-left:10px;

}
ul {
margin-top:0px;}
#static_head{
width:1024px;
margin:0 auto;
position:absolute;
text-align:center;
}
.user_controller {
display:inline;
margin:0 auto;
height:100%;
width:auto;
}
</style>
</head>

<body>

<div class="container">
<div class="navbar" id="dHeaderfixed">
<div id="static_head">
<div id="logo_div" ></div>
<div class="search_div">
<form action="search.php" method="get" id="search_form" name="livesearch">
<input type="text" id="search_box" name="query"></form>
</div>
<div class="menu">
a list of things 
</div>
<div id="ui_user_control">some stuff</div></div>
</div></div></div>

Now, the blank unused spaces should be in the navbar at the left of the logo div, this will be as long as required according to screen size. Again there will be unused space between the search box and the menu div and another unused space at the right of the menu div, so when the user resizes the browser window, all of those elements stay in the middle,and if resized further, the screen just cuts them out instead of altering their positions. Thanks!

Upvotes: 0

Views: 67

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28505

https://jsfiddle.net/xhzxduz2/2/

CSS

nav {
  position: fixed;
  left: 0;
  top: 0;
  background: red;
  height: 48px;
  min-width: 320px;
  width: 100%;
}

.content {
  max-width: 960px;
  margin: 0 auto;
  color: white;
  background: blue;
  height: 100%;
}

HTML

<nav>
<div class='content'>
YOUR MENU HERE  
</div>
</nav>

Upvotes: 2

Related Questions