I have this html code:
<div id="home-page"> hello from home</div>
<div class="home-page top-div">
some text
</div>
<div class="home-page bottom-div">
other text
</div>
This is the css:
#home-page {
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
}
What I want to get is a page split in two parts horizontally, the top part in one colour and the second one in another colour. I tried this but it has no effect on my page.
Does anybody know what I did wrong? Thanks
I think you should define #home2-page also as
#home2-page{
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
}
Using percent in height is dependent on parent div height. If no height is set in the parent div, then height has no meaning.
The same is true for the parent. If you use a percent-height (or no height depending on HTMLElement.style.display) in the parent element, then it's parent needs to have a fixed height. All the way up to the html-element, which you can set to 100% height (and then it should work). html{ height: 100% }
Anyway, that is a silly way to do things, so I suggest you use something slightly more modern instead; The vh vw units (viewport height, viewport width). One vh unit is 1% of the viewport height. Thus, you can replace 50% with 50vh and it'll be something closer to what you wish for.
.top-div {
height: 50vh;
}
Try This:
html,body {
height: 100%;
}
html,body {
height: 100%;
}
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="home2-page"> hello from home</div>
<div class="home2-page top-div">
some text
</div>
<div class="home2-page bottom-div">
other text
</div>
Like #C Travel said, you can't use nested CSS meaning you can't put a class inside a class. You can accomplish your goal by simplifying your code a bit. Checkout my working example below:
CSS:
<style>
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
</style>
HTML:
<div class="top-div">
<p>hello from home</p>
<p>some text</p>
</div>
<div class="bottom-div">
<p>other text</p>
</div>
Related
body {
background-color: blueviolet;
}
.leftcolumn {
width: 30%;
height: 100%;
float: left;
background-color: brown;
}
.middlecolumn {
float: left;
background-color: yellowgreen;
width: 60%;
height: 100%;
}
<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>
I am trying to make three columns next to each other whilst being 100% in height.
I think the problem is that I used 'float: left;', but I wouldn't know what I should've needed to use.
Since both left and middle columns are div, it will be by default display: block, you need to override it to display: inline-block to adjust in the same row.
Other than that the columns are taking 100% height, I have tried giving 100vh to the body, so it is working as expected.
body {
background-color: blueviolet;
height: 100vh;
}
.leftcolumn, .middlecolumn {
height: 100%;
display: inline-block;
}
.leftcolumn {
width: 30%;
background-color: brown;
}
.middlecolumn {
background-color: yellowgreen;
width: 60%;
}
<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>
The reason the columns are not the full height is because you are using height: 100% on the columns
This inherits the full height of the parent element which is the body in this case, to simply fix this, add a height to your body like so:
body {
background-color: blueviolet;
height: 100vh;
margin: 0;
}
The Margin: 0 is there to not make the page overflow
This is because you have to add height to html, body.
can u please use this code in css, it will work.
body,html{height:100%};
I have a div which has a height of 100vh so that it's always the height of the browser screen. Inside of this div I want to place an image and center it vertical to its parent.
The height is variable so I can't use fixed margins. My current Markup is as follows:
HTML
<div class="textportfolio">
<h1>This is a title</h1>
<p class="textbio-small">
The Roosevelt dime is the current ten-cent piece of the United States.
</p>
<img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
</div>
CSS:
.textportfolio {
font-family: "Lora", serif;
margin: 5%;
background: #e9cca3;
height: 100vh;
}
img.portfolio-slides-img {
max-width: 40%;
max-height: 40%;
margin: 0 auto;
display: block;
}
Does anybody know how to center the image vertically according to the browser height?
Here is the code snippet
.textportfolio {
font-family: "Lora", serif;
margin: 5%;
background: #e9cca3;
height: 100vh
}
img.portfolio-slides-img {
margin-top: 15%;
max-width: 40%;
max-height: 40%;
margin: 0 auto;
display: block;
}
<div class="textportfolio">
<h1>This is a title</h1>
<p class="textbio-small">
The Roosevelt dime is the current ten-cent piece of the United States.
</p>
<img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
</div>
I use this css snippet:
.selector {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/
Centering things in CSS has been a long debated topic where people weigh all the factors and argue what the least convoluted way is.
Then in 2014, something called Flexbox came out and basically obsoleted all that.
When a container has display: flex, there's properties to align its children. And you can anchor it in the middle on either/both axis.
<div id="container">
<img src="https://i.imgur.com/i9xpVnQ.jpg" />
</div>
html, body {
height: 100%; /* required to make body occupy the full viewport by default */
}
#container {
height: 100%;
display: flex;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}
img {
height: 200px;
}
https://jsfiddle.net/5goboeey/1/
It's so ubiquitously convenient I think it continues to fly under the radar because people assume it can't be so straightforward.
maybe this stackoverflow question could help you
jsfiddle
code is
HTML
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>
CSS
.frame {
height: 25px; /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center; margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
Try this:
.textportfolio {
font-family: "Lora", serif;
margin: 5%;
background: #e9cca3;
height: 100vh;
position: relative;
}
img.portfolio-slides-img {
max-width: 40%;
max-height: 40%;
margin: 0 auto;
display: block;
position: absolute;
right: 0;
left: 0;
top: 35%
}
<div class="textportfolio">
<h1>This is a title</h1>
<p class="textbio-small">
The Roosevelt dime is the current ten-cent piece of the United States.
</p>
<img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
</div>
Right now Im trying to put an image on the top of a div. The divs are in horizontal, and I don´t know why, but when I put the image its position affects all external divs... I mean, the image should only affect the div in which I put it.
I know this can be a little bit difficult to undestand, I took a capture of my divs: Capture. As you can see, the height of my image affects the external divs.
Here is the HTML code:
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel"><img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue"></div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
And the CSS:
.hoteles{
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles{
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel{
height: 12.5em;
min-width: 23%;
display: inline-block;
background-color: brown;
margin-bottom: 2%;
}
.hotel img{
width: 100px;
}
Other question is... when I put "width 100%" its does not do it, I just can resize the image with pixels... Thanks !
You need to float the divs, currently your divs are positioned as inline-block which is causing disorder. Additionally you can use vertical-align: top to order the inline-block.
Working example:
JSFiddle
.hoteles {
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles {
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel {
height: 12.5em;
min-width: 23%;
background-color: brown;
float: left;
margin:2% 5px 2% 0;
}
.hotel img {
width: 100px;
float:left;
}
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel">
<img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue" />
</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
As for your second question, you need to have a width for the parent of img. Currently it uses min-width, change it to width and give your img the width of 100% and it will expand to the percentage of the parent. Like the following:
.hotel {
width: 23%;
}
.hotel img {
width: 100%;
}
Try adding the following CSS rule:
.hotel { vertical-align: top; }
You are seeing the result of inline elements being positioned along the baseline.
I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.
Here is an fiddle example of what I have now so you might understand what i need better.
And this is the code:
HTML:
<div id="container">
<div id="header">
<div id="menu">
<a href="#">
<img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
</a>
</div>
<div id="title">
My site title
</div>
<div id="my_button">
<button id="button">My button</button>
</div>
<div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>
CSS:
html,body {
height: 100%;
font-size: 2vmin;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}
#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}
#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}
div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}
#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
You can use :after pseudo element for solving your problem.
add this after #header styles in your CSS
#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}
Then remove floats from #menu, #title and #my_buttun div's and apply
display: inline-block;
vertical-align: middle;
The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.
Last: make #my_button width: 19%;
Look here: http://jsfiddle.net/D22Ln/5/
If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.
http://jsfiddle.net/D22Ln/2/
If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/
By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment
#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.
This is difficult for me to ask.
In short: my div overlaps (gets outside the table). I want the table to be sized according to the div.
When I'm trying to add a footer, the content overlaps it. Here is the code:
Here is the page: page
the .middle css class sets the height of the center content to 25px The footer is therefore positioned related to the menu table content on the left.
If you remove the 25px from the css class the div should work as you expect
Ok I will suggest you rewrite your site because it's total mess, use my template for starters:
<div class="wrap">
<div class="header"></div>
<div class="body">
<div class="left-side"></div>
<div class="center"></div>
<div class="right-side"></div>
</div>
<div class="footer"></div>
</div>
And css:
.wrap{
width: 400px;
height: 500px;
margin: 0 auto;
}
.header{
width: 100%;
height: 50px;
background-color: #dddddd;
}
.body{
width: 100%;
height: 350px;
}
.left-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.center{
position: relative;
float: left;
width: 60%;
height: 100%;
background-color: #cccccc;
}
.right-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.footer{
width: 100%;
height: 100px;
background-color: #dddddd;
}
Here is live example in jsFiddle
well, #Arturas.. I kinda agree with #skmasq for your website. I think it'll be better if you're not using table for the layout. but, if still want to use your current website source code, try to delete the .middle's height property. because you set it fixed 25px, but the content is overload, that's why it's overlapping.