Im trying to build a layout for a site and here is my css and html.
Problem:
1.With header and navigation div, I dont use the margin merge but still feel it got merge
2.With navigation and left-nav/content divs the merge is not happening
Can someone explain whats happening?
html
<div id="container">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="left-nav">
</div>
<div id="content">
</div>
</div>
css
html, body {
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
}
#header {
height: 15%;
width: 100%;
background-color:grey;
margin:1%;
}
#navigation {
height: 5%;
width: 100%;
background-color:grey;
margin:1%;
}
#left-nav {
height: 40%;
width: 20%;
background-color:grey;
margin:1%;
float:left;
}
#content {
height: 40%;
width: 70%;
background-color:grey;
margin:1%;
float:left;
}
jsfiddle
Actually all you need to do is to use a global CSS reset or
*{margin:0; padding:0;}
which will remove also the default margin the browser adds to body.
than just go all over your CSS and remove width: 100%; from your DIV elements cause they are already set to auto by default (being block-level elements).
Now that you've done that, for all other elements, all you need is some simple math...
100% - (1%(or 0.5%?) margin * 2sides * No of elements) etc :)
http://jsfiddle.net/7L98c/2/
The merge doesn't happen between navigation and left-nav/content is that you float left-nav and content. When an element is "float", margin around it would not merge with others'.
Related
My problem is that I have an image that I would like to use as the logo for the website. The header and div that it is in are properly sized (i checked by inspecting it on chrome) , but the img is overflowing. How do i scale it down?
(I will use a placeholder image for the code)
Here is the code:
<body>
<header class="mainheader">
<a href="main.html" class="navelement">
<div class="imgcontainer">
<img src="https://lh3.googleusercontent.com/-Ajc8gSO3SRw/VtZj0tsyXhI/AAAAAAAAAHs/tlsdyufJ1J4/w868-h560/2.png"/>
</div>
</a>
</header>
</body>
Here is the accompanying css, I'm confused why the max-height isn't working.
* {
box-sizing: border-box;
}
body{
margin: 0;
}
header{
height:10vh;
width: 100%;
float left:
margin: 0;
background-color:grey;
font-family: 'Teko', sans-serif;
display: inline-block;
}
header .navElement {
vertical-align: middle;
float:left;
width: 17%;
}
.imgcontainer{
float:left;
max-height: 100%;
}
.imgcontainer img{
float:left;
max-height:100%;
}
I realize some things are unnecessary but its because i've tried so much to fix it that i don't know what works. Thanks for any helpful replies.
To prevent overflowing of content, you can simply use the corresponding css-property: overflow: hidden. If you do so, the content which is overflowing, will simply get cut off. In your example, this wouldn't be the right approach.
Instead of using max-height you may use height. By doing so, you'll assign an absolute value for your elements. Since your .imagecontainer only has a max-height property, try replacing it with height, as shown here.
.imgcontainer {
float: left;
height: 100%;
}
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}
So I have a 2 div layout where both divs background needs to be filled full height. But I can't get it right. As I have been relatively out of scripting I think there should be a new and better way then using a background image. Here is the HTML:
<div id="ContentContainer">
<div id="Menu">asdasda
</div>
<div id="Content">Content<br>M<BR><BR>dsfsdf</div>
</div>
And the css:
#ContentContainer {
width: 100%;
}
#Menu {
float: left;
width: 250px;
background-color: #bababa;
}
#Content {
overflow: hidden;
}
here is the example http://jsfiddle.net/DenErello/dzt4Y/
You use the Properties position:absolute and position:relative
Check this Answer: http://jsfiddle.net/dzt4Y/2/
Just set the min-height of html and body and your own divs.
html, body, #Menu, #Content {
min-height:100%;
}
I have 2 divs, and I need both of them to have a minimum size of about 300px.
I need the left div to stretch out to the available space, however if the window size is too small, then the right div needs to drop below. This is what I have currently, but Im not sure what to change.
<style>
.bbleft {
min-height: 237px;
overflow:hidden;
}
.bbright {
float: right;
width: 300px;
min-height: 237px;
margin-left: 10px;
}
</style>
This is what you need
http://jsfiddle.net/fxWg7/790/
HTML
<div class="container">
<div class="left">
content fixed width
</div>
<div class="right">
content flexible width
</div>
</div>
CSS
.container {
height: auto;
overflow: hidden;
}
.left {
width: 300px;
float: left;
background: #aafed6;
}
.right {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
min-width:300px;
width: auto;
max-width:500px; /* not neccessary */
overflow: hidden;
}
fiddle
A css3 approach..
Flexible left div.
Right div drops when page too small.
Left div fills up the rest of the space.
HTML
<div class="left"></div>
<div class="right"></div>
CSS
body{
width:100%;
}
body div{
min-width:300px;
float:left;
}
.left{
width: calc( 100% - 310px );
}
simple use this
.bbleft {
min-height: 237px;
overflow:hidden;
float:left;width:100%;
}
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.