I'm trying to do a basic layout for a website. But I have two problems:
I'm getting spaces between my divs. I have already set margin and padding to 0.
I can't use % to set hights, I have to use vh for some of the divs and I don't understand why.
fiddle: http://jsfiddle.net/4awfk/
HTML:
<body>
<main id="stora">Stora</main>
<nav id="navigation">
<ul>
<li id="ettan"><a>Inredningsuppdrag</a></li>
<li id="tvaan"><a>Instagram</a></li>
<li id="trean"><a>Kontakt</a></li>
<li id="fyran"><a>Leverans</a></li>
</ul>
</nav>
<footer>adress</footer>
</body>
CSS:
* {
padding:0;
margin: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background: yellow;
height: 100%;
width: 100%;
}
li {
list-style: none;
}
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
}
#navigation {
width: 50%;
height: 100%;
background: blue;
float: right;
}
footer {
width: 100%;
height: 25px;
background: white;
position: fixed;
bottom: 0px;
}
#ettan {
width: 50%;
height: 70vh;
background: olive;
float: left;
}
#tvaan {
width: 50%;
height: 35vh;
background: turquoise;
float: left;
}
#trean {
width: 50%;
height: 35vh;
background: white;
float: left;
}
#fyran {
width: 100%;
height: 30vh;
background: gray;
float: left;
}
To remove the spaces between the divs try setting font-size:0 for the whole document and set a font-size on the anchors or the element containing your text, try this for your example:
html {
height: 100%;
width: 100%;
font-size:0;
}
#navigation ul li a {
font-size:14px;
}
Briefly the vh (viewport height) is a new feature in CSS3, I'll explain with an example, if you set your div height to 50vh, this means that you want your div height to stretch to 50% of the viewport height, while setting it to 50% would make stretch to 50% of the div's parent height (same applies for width:50vw).
Here is a reference on how to use them.
EDIT
Another thing to try:
Try floating only the left div and remove the float from the right div, but set display:inline-block for both of them, I can't test the result because I don't have safari, so try it and let us know if it helps.
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
display:inline-block;
}
#navigation {
width:50%;
height: 100%;
background: blue;
display:inline-block;
}
Strange, it looks fine in Chrome and Firefox. Darn cross browser compatibility!
You should try:
overflow:hidden;
I do not have Safari installed to test so this is all I've got, good luck to you sir.
For me:
There was a thin line between dives, so i used
border : 2px solid white;
if you want to set different color for different side of dives, then you should use :-
border-top :
border-right :
border-left :
border-bottom :
based on the side you want to remove the "thin line"
Pardon me if my commenting format is not well defined / sorted (My 1st comment in StackOverFlow)
Related
I'm trying to make a div fill the remaining horizontal space of a parent div which has an dynamic width (based on screen width).
How can I achieve this with pure CSS?
What I try to achieve is shown in the picture below ('Fillable space').
The code for the following example would currently be:
#wrap {
width: 100%;
float: left;
#container {
width: 100%;
padding: 0px 30px;
#static-div {
width: 60px;
height: 60px;
}
#fillable-space {
/* What would my code be to fill the remaining space? */
}
}
}
Thanks in regards
i would use
width: calc( 100% - 60px );
float:left;
like i did in this fiddle: http://jsfiddle.net/74ovL80s/
and if you need to support legacy browsers look here to see if they support the calc function: http://caniuse.com/#feat=calc
If you need to support browsers that doesn't support css calc such as IE8, you can do like this.
#wrap {
height: 100px;
width: 100%;
}
#container {
width: 80%;
padding: 0px 30px;
height: 70px;
background: grey;
}
#static-div {
width: 60px;
height: 60px;
background: red;
float: left;
}
#fillable-space {
height: 60px;
background: blue;
margin-right: 60px;
}
<div id="wrap">
<div id="container">
<div id="static-div">
</div>
<div id="fillable-space">
</div>
</div>
</div>
I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!
FIDDLE
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .
so the following CSS :
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .
with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :
margin-left: // DO YOUR MATH.
padding-left: // DO YOUR MATH.
You already have height: 400px; on your over div so specify the height to #one too http://jsfiddle.net/ypL8ypsf/5/
#one {
position:fixed;
width:16%;
background: #666;
height:384px;
}
Hope this will help
This changes in css will solve your problem
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}
If you have position :fixed on an element. it can only controlled by the browser window, cannot control by parent div. so if you add width: 25% it fill up 25% of your browser window. not in parent div.
i have 2 solutions,
use javascript. dynamically add width in 'px' and add position:
fixed after
use position: absolute. instead of fixed. ( actually your height is 100% so it doesn't matter your position fixed. )
1nd solution: javascript approach [sample code]:
//remove position:fixed from #one
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var calWidth = $("#one").width(); //get the width
$("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>
2nd solution: CSS approach [sample code]
#wrap{
position:relative;
}
#one{
position:absolute;
}
Try overriding your current float and position styles with:
float: left; and
position: relative;
Instead of fixing that DIV, I've float them both to the left and give the second DIV overflow-y scroll property.
Hope this can help you:
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
}
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
overflow:hidden;
}
#two {
float: left;
width: 75%;
background: #333;
height: 100%;
overflow-y: scroll;
}
.clear {
clear: both;
}
If it is not usefull you always can try some framework with default sidebars.
Although you could add some margin to the second div to displace it to the right, I don't think you should use fixed for this.
You should do this:
<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.div1{
background: #DDD;
width:40%;
height: 100%;
float: left;
overflow: hidden;
}
.div2{
background: #EEE;
width:60%;
height: 100%;
float: left;
overflow-y:auto;
}
Here is a pen for you: http://codepen.io/vandervals/pen/bdBWJV
I managed to do what you want but by adding more div.
the HTML would be
<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>
and the css then
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
My HTML has 2 divs inside an outer div:
<div class="outer">
<div class="col-left">
<p>Lorem Ipsum is simply dummy text of the...
</div>
<div class="col-right">Right</div>
<div class="clear"></div>
</div>
The CSS is:
.outer {
border: 1px solid black;
}
.col-left {
float: left;
background: cyan;
width: 80%
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
The height: 100% takes effect only if I set a px height on the .outer class, however, I have a situation in which the height should not be fixed.
How can I use height 100% without specifying in its parent a fixed height?
I'm going to use what Layne wrote in the comments.
This CAN be done, but it's tricky. You need to let html and body know their height before you can tell things inside of them to be 100 height etc. --- So, if html doesn't have a height, than how will body know what to be 100% of? and on down the line. It's a slippery slope that I slide down every other day.
html, body {
height: 100%;
}
.outer {
border: 1px solid black;
/* I use this instead of the micro clear-fix in this case - look that up */
overflow: hidden;
height: 100%;
}
.col-left {
float: left;
background: cyan;
width: 80%;
min-height: 100%;
}
.col-right {
float: left;
width: 20%;
background: yellow;
height: 100%;
}
http://jsfiddle.net/sheriffderek/fdxGZ/
This is also an issue with "sticky" footers and stuff:
Always a battle http://codepen.io/sheriffderek/pen/ziGbE
I hope that helps!
if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen.
http://jsfiddle.net/brandonbabb/SL3FC/
html, body {
height:100%
}
.outer {
border: 1px solid black;
height: 100%;
max-height: 500px
}
.col-left {
float: left;
background: cyan;
width: 80%;
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
use jquery
$(document).ready(function(){
var outerheight = $('.outer').height();
$('.col-right').height(outerheight);
});
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}