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
Related
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'm having problem aligning an image with text.
#content img{
border: 2px solid black;
vertical-align: middle;
}
<div id="content">
<h1><b>Company News 1</b></h1>
<img src="http://www.placehold.it/120x120">
<span style="">
A lot of text...
</span>
</div>
The result is this:
What am I doing wrong?
#content img{
border: 2px solid black;
float:left;
margin-right:5px;
}
I'm assuming you want the text to wrap the image? Try the following instead -
#content img {
border: 2px solid black;
float: left;
}
check the js fiddle
http://jsfiddle.net/5vzBS/
#content img
{
border: 2px solid black;
vertical-align: middle;
float:left;
}
Use float:left property
#content img{
border: 2px solid black;
vertical-align: middle;
width:120px;
height:120px;
float:left;
}
Fiddle : http://jsfiddle.net/kJHK7/1/
Like this
DEMO
#content img {
border: 2px solid black;
vertical-align: middle;
float: left;
margin: 0 10px;
}
EXAMPLE
Simple and easy. Enjoy
#content img {
border: 2px solid black;
vertical-align: middle;
float:left;
margin:0 20px 10px 0;
}
See this fiddle
JSFiddle
CSS:
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
text-align:center;
border:5px solid red;
}
HTML:
<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
center-text;
</div>
In this fiddle I want center-text to be center of the page, not at the center between left-border and float element.
The below is one possible option by adding position: absolute; right: 10px; to the id4 div. This will make the div always stay at 10px from the right margin. But it has to be noted that the element is no longer a float element.
Note: The texts would overlap if the result window is shrunk beyond a certain level. I will update the answer if and when I manage to find a fix for that.
.containers {
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 0px;
text-align: center;
box-sizing: border-box;
}
#id4 {
display: inline-block;
position: absolute;
right: 10px;
border: 5px solid red;
}
#id5 {
display: inline-block;
border: 5px solid red;
}
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
text-align:center;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
margin: 0 auto;
display:inline-block;
border:5px solid red;
}
DEMO
How to center squares in the wrapper without using text-align:center?
I need this because it also centers all text in squares, but I don't need this.
HTML :
<div id="wrapper">
<div id="squares">
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
body {
line-height: 18px;
}
#wrapper{
width: 960px;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
.square {
width:251px;
height:207px;
border: 1px solid #d6d6d6;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
margin: 10px;
overflow:hidden;
position:relative;
background-color:#fff;
display: inline-block;
cursor: pointer;
}
#wrapper{
...
text-align: center;
}
.square {
...
text-align: left;
}
---- Another way (I don't recommed!)
How to find 52px: (width of div - (#of squares * width of one square))/ #of squares+1 ->
(960-(250*3))/4
#wrapper{
...
padding-left:52px;
}
.square {
...
margin: 10px 52px 10px 0;
}
You can try:
.squares {
margin-left:auto;
margin-right:auto;
}
Since it is text inside the squares you are styling you could put an H or P tag around the text and then text-align: left; them.
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;