I feel really silly having to ask this, but I haven't been able to find much info and I am having a strange issue. Basically, I have the following html:
<div class='one'>
<div class='two'>
<img src="someImage" class="img-responsive teamPhoto"/>
<p>Some text</p>
<p>Some text
</div>
</div>
Simple enough. The issue that I am having is that when I look at the height of div one and two, the height is only equal to the nested image in div two.
It does not include the 'P' elements at all, and when I inspect in the browser I can see that both div's only extend as far as the bottom of the image.
What am I missing here that my paragraph elements are being excluded from the div height?
I don't see your css but I am pretty sure that there's something wrong with styles of 'one' and 'two' div. If you inspect the two div element in Chrome dev tool, try to disable all styles for the two div element and it should work.
<div class='one'>
<div class="two" style="position: absolute;background-color: #ccc;">
<div>
<img src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg" class="img-responsive teamPhoto">
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
I'd put the image and p tag inside another div to solve your issue. The div one still has height = 0 though
Related
I have this code:
<h3>Title</h3>
<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>
http://jsfiddle.net/xpccL9h8/
i want to be able to set the title (in the tags) to be above the boxes and allow all the boxes to display inline and responsively
its not currently showing the titles above the boxes as it should (like they are above in the HTML code)
You should maybe try for .col-1-4 display: inline-block; instead of float:left
jsfiddle here
I'm having some issues with my CSS on a transform fold out on hover style element. At the moment it folds out too much and I'd like to reduce the height. I've tried several things to no avail. I was able to find the code itself from a demo located here: http://lab.aqro.be/fb_btn_concept.html
I've tried adjusting a lot of the #under div parameters but so far every time I get the hover state the way I want it the transition messes up and doesn't look right. I'm not very familiar with transitions so I'm hoping somebody on here can help? Here is my jsfiddle:
http://jsfiddle.net/HD2pm/
My goal is to have the fold out be around 100px in height instead of the obviously much larger version that it is at currently.
<div class="row">
<div class="span4">
<section id="btn">
<p>Some Text Will Go Here</p>
<div id="under">
<div class="logo"><div class="recto"><i class="fa fa-user"></i>Consumer</div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"></div>
</section>
</div>
</div>
Looks a lot better with
-webkit-perspective: 550;
http://jsfiddle.net/DrQP2/
Consider a document like this:
<DOCTYPE html>
<html><head><title>test</title></head>
<body>
<div>
<img src="..." alt="" style="clear:both" />
<p>Lorem ipsum...</p>
</body></html>
The image (in my case it's actually an embedded SVG generated ad-hoc) has a size that is not known beforehand. How is it possible that the enclosing div has a width that is just large enough to hold the image (i.e. such that the paragraph below breaks at the same width as the image above)?
This is a follow-up to this question. The code I am currently working on can be found here. The text above the board should have the same width as the board.
This can be accomplished using display:table and a set minimal width. I used width:1px in the sample below, but any minimal width would work.
HTML:
<div>
<img src="..." alt="" />
<p>Lorem ipsum...</p>
</div>
CSS:
div {
width: 1px;
display: table;
}
The result will look something like this:
JS Fiddle Example
you can use float to fit the container
<div style="float:left;background:yellow;">
<img ...>
<p>...</p>
</div>
or you can try (doesn't work with IE7... but you can probably fix it)
<div style="display:inline;display:inline-block;background:yellow;">
<img ...>
<p>...</p>
</div>
and newer mozilla and webkit browsers have
<div style="width:fit-content;margin:0 auto;background:yellow;">
<img ...>
<p>...</p>
</div>
I'm not sure what will happen with your SVG, but in the <svg> declaration you can specify the actual render size of the vectors AFAIK
hoping to be helpful..
I've got problem with paragraph on my website: naprawiamy.za.pl. As u can see there is a big white space in the text. What's that and how it got there? Could somebody tell me?
This happen because the above div contains img that have float:left. So there is need to clear the float. Add overflow:hidden for the div with img tags and will fix the text below.
Your code is written as:
<div id="main">
<div>
<img src="lol.png" id="logo" alt="logo serwisu">
//more images
</div>
<div id="story" >
Your Text
</div>
</div>
Set the CSS Property float:left for
1. <div style="float:left">
2. <div id="story" style="float:left">
I have a box with an image and some txt and I want the txt to be horizontal to the image. I know this may be a pretty easy question but I can't seem to find a good answer on the interwebs. thanks for any help.
<div id='container'>
<img src='someimage.jpg'/>
<p>some text</p>
</div>
Take a look at CSS's float property, for example:
<div id='container'>
<img src='someimage.jpg' style='float: left;'/>
<p>some text (that will now wrap around the image</p>
</div>
Since Rowland's 2010 answer, CSS has come a long way. Today we have Flexbox which is a part of CSS for controlling layout of elements in a row or column. It has a great deal of flexibility for handling alignment within the box and expanding or shrinking elements to fit.
Here is a simple example of how to style the HTML you provided (with the image URL changed to one that will render here).
#container {
display: flex;
align-items: center;
}
#container p {
margin-left: 1em;
}
<div id='container'>
<img src='http://placekitten.com/100/100' alt="" />
<p>some text</p>
</div>
The MDN tutorial linked above is a good place to learn more.
I recommend you to put the text and the image in a table, in the same row, the image would be in the first column, while the text goes to the second column in the first row . here's the code
<div id='container'>
<table>
<tr>
<td><img src='someimage.jpg'/></td>
<td><p>some text</p></td>
</tr>
</table>
</div>