I want to divide page into two "div"s. Left(25%) and right(75%). And i wanted a border between the two, to separate them. But unless I enter text/image into the "div"s they don't expand.
<div>
<div class="left">
<img src="granted_300_50.png" id="logo">
</div>
</div>
And the css is:
div.left{
background-image: url("flower_ornament2_watermark.png") ;
background-repeat: no-repeat;
background-color:white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
Help?
Digvijay
Setting height in percentage on inline elements works only if the container has a specific height set too, up to the body and html.
This CSS should work:
html,body { height:100% ;}
div#container { height:100%; }
div.left { height:100%; }
Another common workaround is the so called "faux column" method:
http://www.alistapart.com/articles/fauxcolumns/
http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
You can also use display:table; for the container and display:table-cell; for the floated divs. But it's not supported by IE7.
div#container { display:table; }
div.left { display:table-cell; }
Take a look at this:
CSS
.left{
width:25%;
height:100px;
border-right:1px solid #ccc;
}
.right{
width:75%;
height:100px;
border-left:1px solid #ccc;
}
HTML
<div class="left"></div>
<div class="right"></div>
Unless you also set a height on the body and html nodes, they will collapse. You can fix this by setting them to 100% height:
Demo: http://jsfiddle.net/SO_AMK/Nhajy/
CSS:
html, body, div { height: 100%; }
div.left {
background-image: url("flower_ornament2_watermark.png");
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
The other solution is to set a min-height:
Demo: http://jsfiddle.net/SO_AMK/MSLdT/
CSS:
div.left {
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
min-height: 100px;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
you can use something like:
/css code/
height:calc(100%-2px);
border:1px solid black;
Related
I have to create two <textarea>s in two different <div>s and both are have to come in single line. And both <textarea>s have to occupy 100% width (50% by each) in all types of screen.
However, when I am trying the second <textarea>, the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea>. How can I avoid right overflow for <textarea>?
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 10px 10px 10px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
Note the change in margin to textarea. That should do it!
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 0px 10px 0px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left</textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead.
and add a box-sizing attribute to remove the border width from the calculate width
html,body,.container{
height:100%;
margin:0;
}
.container{
background-color: lightblue;
border: 5px solid black;
padding:10px;
display: table;
width: 100%;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
box-sizing: border-box;
}
.left{
display: table-cell;
width:50%;
height: 100%;
}
.right{
display: table-cell;
width:50%;
height: 100%;
}
<html>
<body>
<div class="container">
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
</div>
</body>
</html>
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; to container.
Remove margin. Because you are assigning 50% to each left and right textarea. so your total width will be 100%+10px; so it will overflow on x-axis
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
You can use iframes for that. If you use iframes you can fit the overflow to hidden both left and right side
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
I have this short example:
link
CODE HTML:
<div class="header">
<div class="menu-collapse">MENU</div>
</div>
CODE CSS:
.header{
width:300px;
height:auto;
border:1px solid grey;
padding: 5px 0 5px 0;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 0px 10px 0 10px;
height: 100%;
}
My problem is that border (red border) is not until the end header.
There is a space both top and bottom in.
CSS code in the header must remain exactly the same
Can you help me to solve this problem?
Thanks in advance!
set padding 0px for header and add line-height
.header{
width:300px;
height:auto;
border:1px solid grey;
padding: 0;
line-height:25px;
}
remove padding from the .header class. This space is header's padding. And add the padding to the .menu-collapse class.
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 5px 10px;
height: 100%;
}
Here is the fiddle.
Remove Padding from header and provide top & bottom padding too to menu-collapse.
Try this:
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 5px;
height: 100%;
}
<div class="header">
<div class="menu-collapse">MENU</div>
</div>
Check this:
https://jsfiddle.net/6ae7vumn/3/
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 15px 5px;
height: 100%;}
You dont need to use padding in header
I have this code:
<header>
<div id="logo">
<img src="img.png" width="288px" height="80px"/>
</div>
</header>
And this CSS:
header { width: 960px; height: 100px; padding: 10px; }
#logo { float: left; height: 100%; border: 1px solid #000; }
#logo img { border: 1px solid #000; }
How to centralize vertically the img element in this div? I have use the display table, and table cell, but not work.
#logo { height: 100%; border: 1px solid #000; text-align:center; }
-------^^^^^^^^^^^^^^^^^^---
also remove the float
Live Demo
Use this tag text-align: center ; from the CSS for the image to the CSS for its parent div, so your CSS looks like this:
.box {
height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align:center
}
.box img {
height: 100%;
width: auto;
}
Just Replace Your CSS like this.
http://jsfiddle.net/lvtrvd/29uGQ/
header { width: 400px; height: 100px; padding: 10px; }
#logomark { height: 100%; border: 1px solid #000;position: relative;}
#logomark img { border: 1px solid #000; position: absolute;top:0;
bottom:0;left:0;right:0; margin:auto;}
I'm trying to align a table of dynamic size within a parent div. The parent container's height is set, and the inner table's height is unknown (variable). I don't think margins/relative positioning adjustments will work since the size of the table is unknown. Can this be done? Right now the code looks like:
html:
<div id="wrapper">
<div id="board">
<table id="evolve">...</table>
</div>
</div>
css:
#wrapper {
width: 100%;
height: 100%;
}
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
margin: auto;
position: relative;
}
Your desired css code
#board {
display:table-cell;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border:solid 1px black;
}
UPDATE
You will need to alter padding-left depending on wrapper width(if you set it to 100% then it will work)
#wrapper {
height: 100%;
padding-left:36%;
}
#board {
display:table-cell;
width: 265px;
height: 222px;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
}
As soon as i find a better solution i will update it
You can define line-height same as the height of the DIV. Write like this:
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
line-height:222px;
}
#board .evolve {
border: 1px black solid;
margin: auto;
position: relative;
line-height:1.5;
}
Check this http://jsfiddle.net/X4L5A/1/