I have 2 div : avatar and secondClass. I want these 2 div to be aligned, so I'm giving to both of them the css attribut "display: inline-block;"
Inside of "secondClass" I have the div "message", I'm it the css attribut "word-wrap: break-word;".
"avatar" and "secondClass" are only aligned when "message" is not too long, and I want them to be aligned no matter what.
my css are :
.firstClass{
width: 80%;
}
.avatar{
display: inline-block;
padding-right: 5px;
vertical-align: top;
}
.secondClass{
display: inline-block;
vertical-align: top;
}
.message{
width: 50%;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
and my html code is
<div class="firstClass">
<div class="avatar">
<img src="avatar.jpg">
</div>
<div class="secondClass">
<div class="message">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
<br>
<div class="firstClass">
<div class="avatar">
<img src="avatar.jpg">
</div>
<div class="secondClass">
<div class="message">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
For example in this fiddle it's working on the first try but not on the second one:
http://jsfiddle.net/ZZ8Dr/
You'll have to give them a max-width so the avatar and the secondClass both do not go over 100% of firstClass. Have a look at that fiddle.
For example:
.secondClass{
max-width: 80%;
}
.avatar{
max-width: 20%;
}
Use box-sizing: border-box; to include margin and padding in the percentage calculation.
In this case, I'd let .avatar float left. Then the width of .secondClass is not important for the alignment.
.avatar {
float: left;
}
and eventually (if you prefer):
.secondClass {
margin-left: <width of .avatar>;
}
Related
I have the current css:
#inner {
height: 50em;
width : 20em;
overflow: auto;
float : left;
padding :10px;
margin : 20px;
white-space: normal;
}
#outer{
width: 60em;
white-space:nowrap;
border: 13px solid #bed5cd;
overflow-x: auto;
overflow-y: hidden;
}
My html code looks like:
<div id="outer">
<div id="inner">
data
</div>
<div id="inner">
data
</div>
<div id="inner">
data
</div>
. . . .
</div>
I could able to see horizontal scrolling. But the problem is, I don't want to hard code outer.width as 60em. I want to keep it as auto. But that ends in vertical scrolling.
Any idea where I'm making the mistake?
Set white-space:nowrap and overflow:auto on outer div.
Set display:inline-block on inner div, and remove float.
#outer {
border: 13px solid #bed5cd;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#inner {
display: inline-block;
white-space: normal;
width: 20em;
padding: 10px;
margin: 20px;
}
<div id="outer">
<div id="inner">
data
</div>
<div id="inner">
data
</div>
<div id="inner">
data
</div>
</div>
You can apply below css class on the div
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}
I'm trying to center two divs that are using "display: inline-block;" but whenever I try to, it's not working. If I remove the inline-block class. It gets centered but displayed down the page instead of across. Example of code:
#news {
background-image: url('../img/news.png');
background-repeat: no-repeat;
height: 152px;
width: 320px;
display: inline-block;
}
#conBody {
background-image: url('../img/conBody.png');
background-repeat: no-repeat;
height: 260px;
width: 321px;
margin: 0px auto 0px auto;
text-align: right;
display: inline-block;
padding: 0px;
}
HTML :
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="news">
</div>
<div id="news">
</div>
<div id="news">
</div>
Looks like this:
You could contain everything within a wrapper. If you set the wrapper to display: table; then you can canter it even if you do not have a set width.
DEMO http://jsfiddle.net/kevinPHPkevin/nXj7c/
You need to use text-align property.
<div class="news-parent">
<div class="news">
a
</div>
<div class="news">
b
</div>
<div class="news">
c
</div>
</div>
.news-parent{
background: #ccc;
text-align: center;
}
.news {
width: 20%;
display: inline-block;
background: #666;
text-align: left;
}
Live example here: http://jsfiddle.net/7KFNR/
Advice: do not use IDs (#news) - ID is a unique identifier. Simply said: one ID can be found only once on single page. Use classes for rules that apply for multiple elements.
Remember: you need to specify width for div.news elements
You should wrap everything in a div and display it in the centre rather than trying to display each div in the centre individually.
You can centre a block element using CSS:
margin:0 auto;
Here is a fiddle with a barebones demo: http://jsfiddle.net/nRAyQ/3/
how do i can stretch my div according text
I want to stretch height of a div , with the text user posted
look at the screen shot its clear.
CSS :
.cmnt{ width: 570px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right: 15px; clear:both; }
.cmnt .body{ width: 570px; background: #333333; min-height: 90px; height: auto; }
.cmnt .text{ width: 513px; float: left; font-family: arial; color: #FFF; }
.cmnt .arrow{ width: 570px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat 17px top; }
.cmnt .info{ width: 470px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }
HTML :
<div class="cmnt">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
smith (date)
</div>
<div class="rp">
reply ↓
</div>
</div>
Image
Parent :
<div class="comment">
<div class="cmntHeader">Comments</div>
<div class="cmntBody">
<center>
....
</center>
</div>
</div>
You can try adding a float: left CSS property to your outer container.
.cmnt .body{ float: left; width: 570px; background: #333333; min-height: 90px; height: auto; }
Here's a fiddle for you
http://jsfiddle.net/znQa8/
Hope it helps.
The height of a container is automatically adjusted, if not specified, according to the child (not floated) elements.
Because the div (class=text) is floated, its height doesn't take into account. Whenever you used a float, systematically try to clear it after to resolve the height problem.
<div class="text">
...
</div>
<div style="clear:both"></div>
min-height would be your solution.
it could be a possibility to add:
div.body
{
height: auto;
}
but i'm not sure it isn't killing the whole layout
In reference to My Head Hurts you need to clear your floats:
.cmnt .body
{
overflow: hidden;
}
What is happening is that you have a floating container with floating children.
In this case, the floating container "ignores" the children dimensions. This is probably a side effect of the implementation of the real primary objective of float (that was to have floating images on wrapped text).
In this article you can see the floating purpose and a list of workarrounds:
http://www.ejeliot.com/blog/59
And this is what I think is the best solution so far, the micro clearfix (best about it is that you can put in you css and reuse it whenever you need it again):
http://nicolasgallagher.com/micro-clearfix-hack/
Just add this css block to your css file:
/*THE CLEARFIX HACK*/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
And then add the clearfix class to the "body" div.
jsfiddle: XZRH5
I am building a bunch of list items in an un-ordered list. The list has a fixed size of 250px X 75px;These list items are generated dynamically so i do not know what text will be displayed, so my li looks like this.
#pages-content li{
float: left;
width: 250px;
height: 75px;
margin: 15px;
vertical-align: middle;
text-align: center;
}
I found one suggestion that said to make the line height 75px and that worked until there is more than one line.
CSS:
#pages-content ul li{
width: 250px;
height: 75px;
text-align: center;
}
HTML:
<div id="pages-content">
<ul>
<li>Matter here</li>
</ul>
</div>
Working fiddle
Do you have to use lists? Can you use divs instead?
<style>
.div {
width: 250px;
height: 75px;
position: relative;
}
.container {
position: absolute;
width: 250px;
height: 75px;
display: table;
}
.container p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
For a purely HTML/CSS solution, try using a table and vertical-align: middle in the table cell.
http://jsfiddle.net/3zLcT/
If you can only use css, I'm afraid you're out of luck.
adding display: table-cell might work, as vertical-align is meant, more or less, for table data