Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a html page wherein Image and Text come adjacent to each other, as shown in the markup below:
<div><img src="image1.png"/><p>First Image</p></div>
<div><img src="image1.png"/><p>First Image</p></div>
I want the Image and text align side by side under every DIV and all divs to be listed in the page.
Please help me how to achieve this with CSS, without using tables.
I would use display: inline-block
img {
width: 100px;
display: inline-block;
}
p {
display: inline-block;
}
DEMO jsFiddle
If i am understanding you right, you wan't your text to be inline with your image. well if that's the case then the reason this doesn't happen already is becuase a paragraph <p> element is a block element so it would be the whole width of its containing parent. If you wan't to display it inline use display inline on your <p> tag like this
div p{ /* Change this according to your selectors. */
display: inline;
}
div{
overflow:hidden;
display:inline;
}
div img{
display:inline-block;
}
div p{
display:inline-block;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am not asking this because it's a problem for me, actually, that's exactly how I wanted to display the divs, but I didn't know they would appear below each other. Why is that? I only gave them width and height, I didn't position them.
I thought they would appear on each other at the same position
<div class="D1">
</div>
<div class="D2">
</div>
<div class="D3">
</div>
<div class="D4">
</div>
.D1,.D2,.D3,.D4{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
/* OR
div{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
*/
Sorry for this probably dumb question, but I'm just curious :D
That's the expected behavior.
div by default are block elements which means that they always start on a new line and take up the full width available.
If you want elements to be on the same line and to only take up as much width as necessary, you must use inline elements, such as span.
Find here a complete reference
By default, the flow of the page will display your divs elements (which are blocks) one below another as you have seen.
If you want to override this behaviour you could set a
position: absolute;
property to your divs so they can be placed wherever you want regardless of the position of other elements. For example you may want to set all your divs at the top left corner by doing:
div {
position: absolute;
top: 0;
left: 0;
}
By default display property is block for div.Change it to inline to display in one line.
If you use float: left; in css, the problem will be solved. Because div element is a block level element.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have some header text that is large font, two to four lines. It is left justified, but I also want it centered horizontally and vertically. The problem is that it wraps and leaves some blank space at the end of the div (which is set at a width of 600px). So I want it to be centered horizontally, based not on 600px, but the width of the longest line. Is there a way to make the div width the length of the longest line of text?
I guess that's what you want?
#container {
background:gold;
width:600px;
font-size:2em;
display:inline-block;
}
#title {
width:400px;
margin-right:100px;
margin-left:100px;
margin-top:50px;
margin-bottom:50px;
font-weight:600;
}
<html>
<head></head>
<body>
<div id=container>
<p id=title>Here it comes a long sentence that takes about 2 lines.</p>
</div>
</body>
</html>
You can use display: inline-block. Inline-block elements can have a width, but if none is specified, they take the width of their content.
Try adding display: inline-block; and margin: 0px auto 0px auto; to the element you want to centre; I am assuming that you want to centre a div of a varying width, so this code should work.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a top div with some text floated to the left and a div floated right that contains an ad image, social media links, and a search box. My search box is not floating right even though it is in it's own div that I have set to float right. It also appears my ad is not floating right. Also, my social media icons are showing up backwards. Many thanks for the help.
#gsc-control-cse form.gsc-search-box { float:right; width: 200px; }
Fiddle: here
Image of what site looks like when I preview is here
Remove the float right on the inner elements and remove the width 70% on #top-right
#top-right {
float: right;
}
#top-right ul li {
display: inline;
list-style-type: none;
}
#gsc-control-cse form.gsc-search-box {
width: 200px;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a div, and inside it, I have a img element and another div element with h3 and p elements (no problem with them):
The HTML:
<div id="imgandtext">
<img src="https://lh5.googleusercontent.com/-hlvQp1p4RwQ/AAAAAAAAAAI/AAAAAAAAABQ/FmK4byxMObk/photo.jpg"/>
<div id="text">
<h3>the h3 title</h3>
<p>The paragraph to put INLINE with the img and under the h3</p>
</div>
</div>
And I want to put the img and the div called 'text'.
I tried different methods, including the display:inline and it always resulted into the elements being displayed one under another.
How do I fix this? (note: I want to conserve the h3 being above the p element)
Thank you in advance, all help is needed and appreciated.
I would use floating:
#imgandtext > img {
float: left;
}
#imgandtext, #text {
overflow: hidden;
}
Using float: left to the image will place it at the left of #text.
But to make sure the floating element doesn't overflow #imgandtext in case the image is taller than #text, you need #imgandtext { overflow: hidden; }.
And in case #text is taller than the image, you may need #text { overflow: hidden; } if you want it well aligned.
jsFiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have two spans with inline-block display, in responsive mode (for resolution lower than 768X1024) I need to position one on top of the other so I set display to block but the wrong one is on top how can i make the second span to go on top?
thanks
See if this variation helps:
http://jsfiddle.net/panchroma/RLSkL/
The important bits are that I flipped the order of the two divs in the HTML then used CSS to manage the layout
CSS
/* pull the first div to the right and the second to the left for desktop views */
#loginContent{
width:330px;
float:right;
}
#attensions{
width:330px;
float:left;
}
.LgnBtn{
clear:both;
}
/* for tablets and smartphones, remove the floats above */
#media (max-width: 790px){
#loginContent{
width:100%;
float:inherit;
}
#attensions{
width:100%
float:inherit;
}
}
Hope this helps!
Use float:left on the <div> you'd like to be on top.
the only way is move up the #loginContent in your html code, in other hand you can use absolute position to set their position as you like. for exam:
#attensions{
position: absolute;
top: 180px;
}
#loginContent{
position: absolute;
top: 0;
}