I have some problems with creating the correct menu bar layout.
My menu bar is divided to three sections which are:
left (logo), center (menu), right (login information)
There are also two different menus, one is for administrator (few additional buttons - width is 701px) and regular user menu (width is 447px ).
Whole menu bar width is set to 100%.
Now what i need help with is setting the width attribute for each of the sections.
If i set fixed width (px) to center (menu) section, i cant figure out the correct width percentage for other two sections. I also cant set fixed width values for other sections because of the smaller screen resolutions (menu stays wide).
If i set percentage width to center (menu) section, menu might break at smaller screen resolutions.
So what is the best solution?
HTML:
<body>
<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
CSS:
#main {
width:100%;
height:77px;
background-color:#373737;
}
#left,
#center,
#right {
height:77px;
}
#left {
float:left;
} /* width? % or px*/
#center {
display:inline-block;
} /* width? % or px*/
#right {
float:right;
} /* width? % or px*/
Admin menu bar:
Regular user menu bar:
You can try this CSS and adjust the each width if you wish in percentage to sum up to 100% of the main div:
#main {
width:100%;
height:77px;
background-color:#373737;
padding:5px;
}
#left, #center, #right {height:77px;}
#left {float:left;background-color:black;width:25%} /*width? % or px*/
#center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/
#right {float:left;background-color:yellow;width:25%} /*width? % or px*/
I think you're probably going to have to use JavaScript to resize your elements as needed. There's several solutions but none of them allow for mixing dynamic and static widths.
Floats are out because they will jump around when you lower your screen size. Unless you want to have them fall below the other sections when its too small.
Just think of each div as an individual element instead of them working together. I'd strongly suggest not using a float in this situation if your goal is cross browser compatibility.
Good luck. :)
Related
I'd like to use a centered, single-column HTML/CSS layout similar to stackoverflow's for both, desktop and mobile use, i.e. very different screen widths and resolutions.
I'd like to avoid having to use code (client or server) to detect and handle devices differently (i.e. deliver different layouts / styles).
The layout
should be centered (currently using centered div using auto property for left and right margins - this requires a fixed width)
should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile
will have header bar that visually extends to the window edges (same as stackoverflow's) and a have footer that should be at the bottom of the page, even if there's not much content (for this, CSS Single-column layout centered fixed-width 100% height w header and footer may have an answer)
Can this be achieved based on a simple centered div such as the following or what is the state-of-the-art? The following is rendered tiny on Firefox for Android:
#center {
margin: 0 auto 0 auto;
width: 10em;
background-color: gray;
}
<div id="center">
Content div<br/>
<ul>
<li>should be centered</li>
<li>should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile</li>
<li>will have header bar that visually extends to the window edges and a have footer that should be at the bottom of the page, even if there's not much content (for this, https://stackoverflow.com/questions/23651942/ may have an answer)</li>
</ul>
</div>
Note I'm using 10em for the width (to make it fit in the snippet editor preview) - is there a more appropriate unit or additional properties for an "absolute" size to ensure readability (and sizing) on all screens?
Desktop:
Mobile:
The awswer you found already gave a big hint in what you should be using for this, namely display: flex;. Building on top of the fiddle provided there, you could do something like this:
Which is giving the main content column a 100% value of width in combination with a max-width of, let say, 768px. In this example flex-grow:1; is used to fill up the height completely but maybe not be necessary for your project.
html,
body {
height:100%;
padding:0;
margin:0;
width:100%;
}
body {
display:flex;
flex-direction:column;
}
#main {
flex-grow:1;
background:#f3f3f3;
max-width: 768px;
width:100%;
margin:auto;
}
header {min-height:50px; background:green;}
footer {min-height:50px; background:blue;}
<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>
I want to have 2 different columns for the content on my website, they way I want it is like this:
http://i.stack.imgur.com/V4uX2.jpg
It shows like that on my computer monitor, but on my mobile it shows up like this:
http://i.stack.imgur.com/H7CNe.png
As you can see, I would like the two sides to always be next to each other and not one under the other as on my mobile.
CSS
#leftSide {
margin-top:80px;
margin-left:200px;
float:left;
width:400px;
}
#rightSide {
margin-top:80px;
margin-left:10px;
float:left;
width:400px;
}
HTML:
<div id="leftSide">
</div>
<div id="rightSide">
</div>
Check the resolution of your mobile. You probably have a screen of width less than 800px while your content needs more than 800px to be displayed.
Also, for 2-column display, the best way is to use float left and right on the two divs. You should read about responsive CSS which can stylize the width of your divs based on the device width.
you could use a few things...
The display block-inline function or you could just float the picture right. Or you could use tables but I personally hate those.
#sidebar {
margin-top:80px;
float:right;
width:400px;
margin-left: 5%;
Make sure that the the total widths don't exceed the width of your parent container. You also might want some padding on the right side of the picture.
I have two divs, once for main page content and the other for a sidebar.
Both have widths set as percentages, so they will keep their proportions if the window is resized. However, the sidebar has a minimum width, since that content can only resize so much before it begins to look broken. When the window is resized small enough that the min-width kicks in, the sidebar begins to encroach on the main page content, because the main page content does not know that it now needs to take up a smaller percentage than the one defined to account for the sidebar. I'm trying to make it so that, when we have enough width, the main content and sidebar can maintain their respective proportions, but when we get to the point where the sidebar content would begin to look broken, the main content adjusts its width more to compensate.
Is there a way to do this with css/html, or will I need to write some JavaScript to calculate the new widths and adjust the values in the stylesheet dynamically?
Here's a (simplified) example of what I have:
HTML:
<div id="maincontent">
<!-- Main page content here -->
</div>
<div id="sidebar">
<!-- Sidebar content -->
</div>
CSS:
#maincontent
{
width: 85%;
}
#sidebar
{
width: 15%;
min-width: 120px;
}
In this example, everything will be fine as-is as long as the browser window is more than 800px wide. But once we drop below 800px, the maincontent needs to now become smaller than 85%, to make up for the fact that 120px is more than 15% of the browser width.
You could try
#media all and ( max-size: 800px ) {
#maincontent { width: 75%; }
}
of course, replace 800px and 75% with the screen size and percent that fits
Is this what you are looking for?
CSS
#maincontent{
background-color:orange;
}
#sidebar
{
background-color:blue;
width:15%;
min-width:120px;
float:left;
}
HTML
<div id="sidebar">
I am the sidebar!
</div>
<div id="maincontent">
I am the main content!
</div>
DEMO: http://jsfiddle.net/HFuCe/30/
I am making the layout of a web page that I want it to have the same look in all screens. The page I am working on, has three parts, header, main, and footer, which I want to header to be on the top of the screen. main and footer sticks to the bottom of the page.
Here is what I want to do:
I made the header to in the top but I couldn't add percentage to the main and footer section.
Also in the header there is a div which called 'div5', I want it to sticks at the bottom of the parent div which is main or middle box.
in the footer I have three boxes which want to have them in left, right and center.
Can you have a look at the linked site and let me know how to fix these problems.
percentage heights only work if you set the parent element to have a height.
( the elements will ask "percentage of what?" )
Here we set a height to the body
css
<style type="text/css">
html,body { height:100%;}
#header { display:block; height:10%; }
#main { display:block; height:80%; }
#footer { display:block; height:10%; }
</style>
markup
<body>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
By doing these you are making you div 2,3 & 4 overlap. make sure that even that is taken care of. and Yes you must consider an option of Css media queries. Please go through the demo here
I was developing a mental picture of a future website I'm building and stumbled on a question I cannot answer.
Basically, there is going to be a vertical navigation menu about 180px wide. The height will be set to 100% and the position:fixed; top:0;. This way, the div will follow you as you scroll along the page... However, the problem is, that div will have a different background color then the body or the rest of the page and I'm trying to nest the div inside a 980px wide page. I want everything to the left of that div to be the same background color. The reason why I cannot specify the width is because it will be 180px for the navigation, but the width will be 180px + whatever's to the left of the menu. To understand clearly, this is a flexible solution but does not have the left of the div set to the right color: http://jsfiddle.net/kkFc7/ This is a solution that accomplishes the look I want, but only in 1200px wide browsers http://jsfiddle.net/kkFc7/1/ if the browser was wider, it would just stay to the left of the window but I don't want that. I want the div to be held inside the container, but the background color to the left of it should be the same.
The algorithm is something like ((browserwidth-800px)/2)+180px=Width of div#menu.
I'd prefer not to use any algorithms or JavaScript to accomplish. Does anybody know some CSS tricks that will get me a flexible DIV that takes up the width to the left of it?
can create a div that takes up 50% of the width behind the #content div
jsfiddle example (full-screen)
like so
<div id="menu-bg-color-matchtastic"></div> <!-- <<< Add this div -->
<div id="content">
<div id="menu">
Hello<br>
Goodbye
</div>
</div>
add similar attributes as the menu, background color, position fixed...
#menu-bg-color-matchtastic {
position:fixed;
width:50%;
height:100%;
left:0;top:0;
background:#494949;
}
make #content position relative with a white bkgd so our new div stays behind the content
#content {
width:980px;
height:2000px;
margin:0 auto;
background:#fff; /* <<< Add this */
position:relative; /* <<< and this */
}