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
Related
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;
}
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.
I have 2 block-inline divs.
I don't wan't to specify the width of the first one but, I would like the second takes 100% of the remaining space. The container of the two divs take 100% of my screen.
It seems to be possible using jQuery to determine the width of the first div and to set the second value, but I would like to do it in pure css.
How can I do that ?
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.div2 {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="clear">
</div>
Hope it helped.
If you don't want to use jquery then this might worth doing
<div style="width:100%;">
<div style="float:left; display:inline-block;" class="div1">left div</div>
<div style="float:right; display:inline-block;" class="div2">right div</div>
</div>
Edit: A note to anyone reading this, the whole reason it didn't work for me is because I was using DOCTYPE TRANSITIONAL. Which no change in HTML or CSS whatsoever, switching to DOCTYPE STRICT made it work. This is true for at least Chrome, FF, and IE8.
I have tried many many solutions offered online and none of them seem to work for me. I am trying to vertical-align an image inside a div (the image is already horizontal-aligned).
The image can be any width and any height (up to 70px) so I can't use a fixed margin or anything like that.
Here is my HTML+CSS:
<head>
<style type="text/css" media="all">
#list ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#list li {
border: 2px solid #DDD;
margin-bottom: 3px;
height: 110px;
}
#image {
width: 75px;
height: 110px;
line-height: 110px;
float: left;
}
#image img {
vertical-align: middle;
display: block;
margin: auto;
}
#event {
margin-left: 75px;
}
</style>
</head>
<body>
<div id='container'>
<div id="list">
<ul>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
You can't use vertical-align on a block element. An image is usually an inline element, but you have yours explicitly set to display: block. Remove that, and set the line-height of the parent div to the div's height.
Works here: http://jsfiddle.net/YnzR9/1/
#image {
width: 75px;
height: 100%;
float: left;
line-height: 110px;
text-align: center;
}
#image img {
vertical-align: middle;
}
Set the "line-height" of the div to the same value as the height of the div.
Update: Assuming you want the image vertically aligned and centered, use the following.
#image {
width: 75px;
height: 110px;
float: left;
line-height: 110px;
text-align:center;
}
#image img {
vertical-align: middle;
}
i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)
here is the codes:
<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
<div class="content-right">
<div class="r-cont">
<div class="r-cont-header"> header goes here </div>
<div class="r-cont-content"> <p>• There is a sample right content...</p></div>
</div>
</div>
<div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->
and here goes css codes:
.mbody {
clear: both;
width: 920px;
position: relative;
overflow: visible;
height: auto;
margin: 0px auto;
}
.mheader {
height: 163px;
width: 856px;
background-image: url(img/header.png);
padding: 32px;
}
.mmenu {
height: 40px;
width: 920px;
background-image: url(img/menu-bg.png);
}
.mcontent {
width: 880px;
overflow: visible;
padding: 20px;
height: auto;
background-color: #FFF;
clear: both;
}
.content-right {
width: 200px;
float: right;
}
.content {
margin-right: 220px;
}
.r-cont {
clear: both;
width: 200px;
}
.r-cont .r-cont-header {
background-image: url(img/menu-head.png);
height: 32px;
width: 168px;
line-height: 32px;
color: #FFF;
padding-left: 32px;
font-weight: bold;
font-size: 16px;
}
.r-cont .r-cont-content {
background-color: #F8AF6B;
font-size: 12px;
padding: 6px;
}
.mfooter {
height: 60px;
width: 920px;
background-color: #F58220;
background-image: url(img/footer-bg.png);
clear: both;
}
here we go...
if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...
my customers still use ie6, so i cannot any css effects and css3 codes...
thanks in advance...
.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content
I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.
If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.
.mcontent {overflow: hidden;}
Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/