I am trying to understand the position in html and css by playing around with an example I have made up. In this example what I have created 3 divs which show color blocks. I am trying to make the first 2 blocks span the width of the screen and the third do just sit as it is on screen. I am trying to have all 3 blocks just stacked on top of each other.
in my html i have created 3 classes:
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
In my css i have defined the colors, shapes and positions of these blocks:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: static;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
The red block is on top followed by blue then green. It looks like the following picture:
The problem comes when I try and change the positioning in order to make red and box span the width of the screen. i change the red box css as follows:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
what happens is the redbox spans the width of the screen but the other two boxes shift upwards. how can i stop the blue box and the green box from shifting upwards?
The problem is caused by position: fixed; which you don't even need.
I think what you actually want is to set body { margin: 0; }.
According to W3Schools:
Most browsers will display the <body> element with the following
default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
You can see in the snippet below, that if you add this to your CSS (i.e., remove the margin from the body), all three boxes become full viewport width (even though the width is set to 100%!).
See the snippet below.
body {
margin: 0;
}
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred"></div>
<div class="color-stripblue"></div>
<div class="color-stripgreen"></div>
you could add margin-top:20px; to .color-stripblue
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
.color-stripblue {
margin-top:20px;
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
Related
I'm designing my CSS layout, but can't get the div to stretch to 100% of the height of the parent.
I have a menu bar that takes up the top 13.714vh of the screen. Then I have a main div that I want to take up the remainder of the screen height which I did with height: 100%. bottom-container takes up the bottom 38.2% of the vertical space available in main, and I want speech-bubble to take up the remaining 61.8% of the vertical space in main.
For some reason though, there's a huge white container in the middle of the screen, and speech-bubble isn't taking up the remaining space because of it. Can anyone help me figure out what's going on?
Is there a problem with my HTML or did I make an error in the CSS?
Here's the code pen:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
body {
margin: 0;
}
.menu-bar {
height: 13.714vh;
width: 100vw;
background: darkblue;
top: 0%;
}
.main {
background: black;
grid-template-rows: 61.8% 100%;
height: 100%;
width: 100%;
padding-left: 1.5%;
padding-right: 1.5%;
padding-top: 1.5%;
padding-right: 1.5%;
}
.speech-bubble {
grid-row: 1;
position: relative;
background: orange;
height: 97%;
width: 97%;
border-radius: 4em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
visibility: hidden;
}
.question-text {
visibility: hidden;
}
.bottom-container {
grid-row: 2;
position: fixed;
background: green;
height: 38.2%;
width: 100vw;
bottom: 0%;
left: 0%;
}
<div id="menu_bar" , class="menu-bar"></div>
<div id="main" , class="main">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="btn">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
</div>
</div>
</div>
Do you want anything like this? screenshot.
If so, making your .menu-bar as position: relative and modifying your .main class styles as follows will work:
.main {
position: absolute;
background: black;
left: 0;
right: 0;
height: 50%;
}
Also, you may add margin: auto in your speech-bubble class to align it to center.
Your main tag is not taking full height as your html and body tags are not taking the full height.
Always remember that block elements can stretch maximum to their's parent's height, hence you need to give html and body tag height of 100%.
I have added the additional css below.
html, body { height: 100%;}
I think you want thing like this
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.menu-bar {
height: 13.714vh;
background-color: tomato;
color: #fff
}
.main {
background: black;
padding: 1.5%;
flex: 1
}
.speech-bubble {
background-color: orange;
border-radius: 4em;
height: 95%;
position: relative;
display: flex;
flex-direction: column;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
align-items: center;
justify-content: center;
flex: 1;
display: flex;
}
.question-text {
height: 50px;
position: relative;
text-align: center
}
.bottom-container {
height: 70px;
background-color: lightseagreen;
}
I'm not a css-smarty, I already tried some codes from the internet and stackoverf but still not helping.
How can I fix a div on the left side of page, image can be found down below.
Image: http://prntscr.com/fbhhdi (I selected position with red lines)
If the red outline in your screenshot is, for an example, a div with class="fix-this", then your css would be like this:
.fix-this {
position: fixed;
left: 0;
}
Position fixed will position your div relatively to the viewport.
Left: 0 will place it to the left.
Now, if you also want it to go full height, you can add:
.fix-this {
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
I think it will solve your problem.
body {
background-color: #000;
height: 100%;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#wrapper {
height: 100%;
}
.leftCol {
border: 2px solid red;
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: 250px;
}
.rightCol {
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: calc(100% - 254px)
}
<hr></hr>
<div id="wrapper" class="clearfix">
<div class="leftCol">
Content Here
</div>
<div class="rightCol">
Content Here
</div>
</div>
I am trying to make a 3-column layout but as you can see from the screenshot below the left-most and right-most columns don't span all the way down:
You can find the code at http://codepen.io/vbelenky/pen/hvbEq and I'm going to paste it here, too:
<div class="wrapper">
<div class="primary">
<div class="primary-left">
Primary Left<br>
blah
</div>
<div class="primary-right">
Primary Right
</div>
</div>
<div class="secondary">
Secondary
</div>
</div>
CSS:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
}
.secondary {
width: 200px;
float: left;
background: cyan;
}
.primary {
width: 400px;
float: right;
}
.primary-left {
width: 300px;
float: left;
background: grey;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
}
HTML :
Use follow code that is similar to your query :
<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</br>Center<br/>Center<br/></div>
<div class="right">Right</div>
</div>
CSS :
.mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% }
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; }
.center{ margin: 0 100px;background:green; }
http://jsfiddle.net/pfqpR/
Like monkhan said, you'll need to set heights for all of the elements, for example (see on CodePen):
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
height: 40px;
}
.secondary {
width: 200px;
float: left;
background: cyan;
height: inherit;
}
.primary {
width: 400px;
float: right;
height: inherit;
}
.primary-left {
width: 300px;
float: left;
background: grey;
height: inherit;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
height: inherit;
}
The downside of this approach is that you'll need to know what the maximum height is ahead of time (in this case, I picked 40px).
One way to approach this is with absolute positions (instead of floats). It doesn't fit to all needs, but it may fit yours.
http://codepen.io/anon/pen/lLngy
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
position: absolute; top: 0; left: 0; bottom: 0;
}
.secondary {
width: 200px;
background: cyan;
position: absolute; top: 0; bottom: 0;
}
.primary-left {
width: 300px;
background: grey;
position: absolute; top: 0; left: 200px; bottom: 0;
}
.primary-right {
width: 100px;
background: yellow;
position: absolute; top: 0; right: 0; bottom: 0;
}
One approach that wouldn't require you to set any pre-determined heights would be to apply a 3-colour background image to the wrapper (image height can be 50px and "repeat-y").
This way you will have the background colours of the inner divs repeating all the way down to the bottom and it won't matter which inner div is the tallest.
For example:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
background-image: url('3colours.png');
background-repeat: repeat-y;
}
Others said it well. I am just showing another possible way(inconvenient). Inconvenient because it makes the width changing more difficult. Just a background image hack. Use a background image of (wrapper width x 1)px for the .wrapper with colors at appropriate positions. Also remove the background color styles from .secondary, .primary-right and .primary-left.
Here is the fiddle: http://jsfiddle.net/eY9VR/
My coworker gave a solution. The main idea is not to use float property and use display table and table-cell. Please refer to the code for reference. I had to move div.secondary to the top, I commented out the float attribute everywhere, I've declared div.wrapper as display: table and div.secondary, div.primary-left, and div.primary-right as display: table-cell.
I'm trying to create a 3 columns layout in css with a togglable one. The following scheme should explain it better than words.
I want the 3 columns be full height.
In red: A static width column
In green: A togglable menu
In dark green: The menu after being toggled
In white: The main container which should fill the rest of the page
I've tried to do it with the following code but without success:
<div id="header"></div>
<div id="inline_container">
<div id="left_menu"></div>
<div id="toggle_menu"></div>
<div id="main_container"></div>
</div>
And with this css code:
* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#header {height: 70px; width: 100%;}
#inline_container {height: 95%; width: 100%;}
#left_menu {height: 100%; width: 80px; display: inline-block; float: left;}
#toggle_menu {height: 100%; width: 150px; display: inline-block; float: left;}
#main_container {height: 100%; width: 100%; display: inline-block; float: left;}
Did you want something like this?
http://jsfiddle.net/Kcfde/
I've added jQuery script to show toggle effect, just click the green div.
Basically, when you set float and width, elements should remain with display: block, as they'll fit in into content.
Working FIDDLE Demo
For creating full height page, you need a wrapper:
<div id="wrapper">
<!-- MARKUP -->
</div>
That will fill the whole page:
#wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Inside our wrapper, we create our wanted elements:
<div id="wrapper">
<div id="red"></div>
<div id="lime">
<div id="green"></div>
<span class="close">[X]</span>
</div>
<div id="white">
TEXT
</div>
</div>
Note that the green element is a child of lime element. If lime get class collapsed, all data
will be hidden and the green one will be display. Here is the CSS:
#wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#red {
float: left;
width: 200px;
height: 100%;
background: red;
}
#green {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30px;
background: green;
display: none;
cursor: pointer;
}
#lime .close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
background: pink;
cursor: pointer;
}
#white {
height: 100%;
background: gray;
}
#lime {
position: relative;
float: left;
width: 200px;
height: 100%;
background: lime;
transition: width 0.5s;
}
#lime.collapsed {
width: 30px;
}
#lime.collapsed * {
display: none;
}
#lime.collapsed #green {
display: block;
}
And for closing and opening the lime element, we need some JS (I used jQuery):
$(function () {
$('#lime .close').on('click', function () {
$('#lime').addClass('collapsed');
});
$('#green').on('click', function () {
$('#lime').removeClass('collapsed');
});
});
You can see the final FIDDLE Demo.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.