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;
}
Related
I am facing some issue with display block which I have put here with simplification.
.parent
{
width:200px;
border: 1px solid black;
background-color: #cccccc;
}
.first
{
border: 1px solid black;
float: left;
width:30px;
}
.second
{
border: 1px solid black;
display: inline-block;
background-color:white;
}
<div class="parent">
<span class="first">first</span>
<span class="second">second</span>
</div>
Revamping the question and its was quite confusing earlier. In above code snippet, .second width is limited to its content. I want .second to extend to end of the parent container .parent . I have tried using display: block instead of inline-block for .second but its not working. Please suggest how to do it?
if I got your point you can use overflow:hidden and while you use a <span> you will need to add display:block . Additional No need for display:block if this is a div
.second
{
border: 1px solid black;
background-color:white;
overflow:hidden;
display : block;
}
Demo
.parent
{
width:200px;
border: 1px solid black;
background-color: #cccccc;
}
.first
{
border: 1px solid black;
float: left;
width:30px;
}
.second
{
border: 1px solid black;
background-color:white;
overflow:hidden;
display : block;
}
<div class="parent">
<span class="first">first</span>
<span class="second">second</span>
</div>
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
when I display img inline-block.but there is a gap between the first line and the second !! below is the sample, picture1 and picture3 have a gap?I dont't want the gap..so help me..
img {
display:inline-block;
width:200px;
background-color:#ccc;
border:5px solid red;
padding:10px;
text-align:center;
margin:0px;
}
<img alt="picture1"/><img alt="picture2"/><img alt="picture3"/><img alt="picture4"/>
Images make a gap by default, you can fix that using vertical-align
img {
display: inline-block;
width: 200px;
background-color: #ccc;
border: 5px solid red;
padding: 10px;
text-align: center;
margin: 0px;
vertical-align: middle;
}
http://jsfiddle.net/opz672zn/
vertical-align may help you to fix the issue.
img {
display:inline-block;
width:200px;
background-color:#ccc;
border:5px solid red;
padding:10px;
text-align:center;
margin:0px;
vertical-align: top; <!--Added-->
}
<img alt="picture1"/><img alt="picture2"/><img alt="picture3"/><img alt="picture4"/>
Working Fiddle
I have a page set up like this:
HTML:
<div id="wrapper">
<div id="right">
...
</div>
<div id="left">
<div id="top">...</div>
<div id="bottom">...</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
width: 400px;
}
#wrapper #right {
position: relative;
float: left;
width: 400px;
border: 1px solid black;
}
#wrapper #left {
position: fixed;
float: left;
width: 200px
top: 150px;
margin-left: -230px;
border: 1px solid black;
}
#wrapper #left #top {
float: left;
border: 1px solid black;
margin-bottom: 20px;
}
#wrapper #left #bottom {
float: left;
border: 1px solid black;
}
For some reason the bottom div inside the left div isn't showing up. Any explanation as to why it's not showing up? And is there a solution? Thanks in advance!
When you use float:left;, the <div> will not take up space, so the bottom <div> is behind the top div. To fix this problem, get take out float:left; from the top <div>.
It's showing. Check http://codepen.io/anon/pen/pzqoi
#wrapper {background:#f4f4f4; height:960px;}
#right{background:#f4f4f4; border:1px solid #ccc; float:right;}
#left {background:#f4f4f4; border:1px solid #ccc; float:left; padding:10px;}
#top {background:#f4f4f4; border:1px solid #ccc;margin-bottom:5px;}
#bottom {background:#f4f4f4; border:1px solid #ccc; clear:both;}
I have a design where I need to align a header to some content in another column.
The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.
(The below is just some demo code to highlight my issue)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
Please see
http://jsfiddle.net/bmxSY/
So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.
EDIT*
The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}
The easiest method is with display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/
.container {
text-align: right;
}
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
Actually it is not possible, but by tricking, we can do it.
.outer {
position:relative;
display:table;
height: 200px;
width: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #CCCCCC;
background:red;
float:left
}
.inner {
width:100%;
display:table-cell;
vertical-align:bottom;
position:relative;
}
p{background:blue;border:1px solid #000}
Demo: http://www.pmob.co.uk/temp/vertical-align9.htm
Use table-cell to align the div o the bottom of the parent.
unfortunately dispaly:table-cell doesn't support margin option so you need to manipulate it through border.
CSS
.container{display:table-row; float:right}
.header-container
{
width: 200px;
font-size: 1.4em;
border-right:20px solid white; border-left:20px solid white;
border-top:10px solid white; border-bottom:10px solid white;
border-bottom: 1px solid #bbb;
display:table-cell; vertical-align:bottom
}
DEMO