The header in the pic is styled in 3 parts the top part contains a div with the width 100% and background color and inside the dive there is a div styled as a container which holds all elements at the top. This container has a width of 1000px and min-width of 960px and margin: 0 auto;
but when u re-size the browser and scroll with the scroll-er at the bottom the header appears as follows.
What am I doing wrong here for it to render this way?
CSS
#header {
height: 120px;
width: 100%;
margin-bottom: 15px;
}
#header .nav-content-holder {
width: 1000px;
min-width: 960px;
margin: 0 auto;
}
#header .header-menu-top {
height: 20px;
background-color: #d8d4cf;
color: #Color-Txt-black;
}
#header .header-menu-middle {
height: 70px;
background-color: #Color-FM-brown;
color: #Color-Txt-white;
}
#header .header-menu-bottom {
border-top: 1px solid #d3d3d3;
height: 28px;
background-color: #Color-FM-brown;
margin-bottom: 15px;
color: #Color-Txt-white;
}
HTML
Without code it is impossible to know what is going on but you need to try min-width: 1040px; on body.
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I am creating a table inside a tab. I want to set the width of tab to the width of media screen but keep the width of table fixed to 630px. The max-width of div should be 400px. When the table does not fit into the div, it should display a horizontal scrollbar.
The div is successfully showing a horizontal scrollbar. But, when I resize the window, the scrollbar along with table is hiding inside the div. I want to display the scrollbar according to media width.
The example will become clear:JsFiddle
Please use tab and tab-content class width 100% may be it will work for you. I am sharing your complete code below with my changes i have done some width changes px to %, and what is the purpose for #model margin-right:1000px it will work find without margin.
#tabs-container {
height: auto;
overflow: hidden;
margin-bottom: 40px;
position: relative;
top: 60px;
border: 1px solid #ddd;
padding-top: 10px;
max-width: 400px;
}
.tab {
border: 1px solid #d4d4d1;
background: linear-gradient(#f8fbea, #fff);
margin: -20px 10px 10px 10px;
float: left;
position: relative;
top: 0;
z-index: 3;
width:100%;
height: auto;
overflow-x: auto;
overflow-y: hidden;
}
.tab-content {
padding: 10px;
width:100%
}
#model {
font-size: 12px;
margin: -10px -10px -10px -320px;
position: relative;
margin: 0 auto;
font-family: tahoma;
}
#model {
margin-right: 1000px;
width: 630px;
}
#model td {
vertical-align: middle;
}
#model tr:first-child td {
font-weight: 600;
text-align: center;
background-color: #ebebeb;
}
#model tr:nth-child(even) {
background-color: #f6f6f6;
}
#model tr:nth-child(odd) {
background-color: #fff;
}
explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
I'm trying to create an effect where the blue section extends past the gray section.
The blue section is currently contained within the gray section, which may be the problem.
http://nufios.com/node
I've got this as the HTML:
<div id="header-wrapper">
<div id="header">
...
</div></div>
And this as the CSS:
#header-wrapper {
width: 100%;
background-color: #686868;
}
#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
}
How do I get it so that the blue section is centered within the gray section, and can still go down below the gray section (i.e., the height is greater on the blue section).
Try using z-index and fixed heights:
CSS:
#header-wrapper {
width: 100%;
background-color: #686868;
height:30px;
}
#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
z-index:10;
height:50px;
}
jFiddle demo here: http://jsfiddle.net/LynchJustRules/RQV4h/
Just give your #header-wrapper height. If you want to always fit the blue box's height when its height is less than the gray box's, set the max-height
#header-wrapper {
width: 100%;
background-color: #686868;
max-height: 92px;
}
I'm building a wordpress theme and I'm stuck on something.
I have a div on the side with these styles:
#sidediv{
width: 20%;
height: 71%;
float: left;
overflow: hidden;
background-color: #000;
}
and:
the "content" div with these styles after the sidediv
#main{
background-color: #a70202;
color: #FFF;
min-height: 71%;
padding: 10px;
}
The problem is that the #main div is partly underneath the #sidediv.
The content is next to it as it should be but the padding is not applying and if the background-color is removed from the #sidediv the background-color of the #main is showing underneath
This is the website i'm working on http://vba.durfoptevallen.nl/
try this:
#main{
background-color: #a70202;
color: #FFF;
min-height: 71%;
padding: 10px;
float:left;
width: 80%;
}
Added float:left and width: 80%;
On that url, you have another problem:
http://vba.durfoptevallen.nl/wp-content/themes/Vastgoedbeleggingen_Theme/js/small-menu.js?ver=20120206 is not loading (404)