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.
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 is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Assuming I wanted to have a in a div picture on the left side of the screen and descriptions or any other group of text on in another div the right side.
What is the benefit of wrapping both in a third container div, rather than just using the inline-block display to put them side by side?
I'll try to answer this with a simple demo. The issue with using inline-block is that each element with inline-block is treated like a character of text. This means space will be provided to the sides of and below the element. This does not work well when you need to set container elements with a width. This is a common issue with horizontal navigation when using inline-block instead of float or flexbox.
Inline
nav a {
display: inline-block;
width: 25%;
text-align: center;
background-color: rgba(255, 192, 203, 0.5);
}
<nav>
Link 1
Link 2
Link 3
Link 4
</nav>
Notice the gaps between the anchor elements. This is due to them being "inlined."
Float
nav a {
float: left;
display: inline-block;
width: 25%;
text-align: center;
background-color: rgba(255, 192, 203, 0.5);
}
<nav>
Link 1
Link 2
Link 3
Link 4
</nav>
Now the space is gone and each element is 25% the width of the parent element without the extra space being added between the elements.
This demo is another common question and it has to do with and element being inline.
.img-border {
display: inline-block;
border: 2px solid #333;
}
<span class="img-border">
<img src="http://placehold.it/100x100">
</span>
Notice the space below the image? That again is due to the element being "inlined" and treated like a text character. The space is left for what is known as a descender. Lowercase letters like g, j, y drop below the baseline of the text and the portion that does is the descender.
Not only does the extra space become a headache to deal with, it's often easier to control content in general let alone the layout of related content when it's "encapsulated" in it's own container element.
I don't know if this will help you at all but here's a try....
Inline-block to an element generates an inline-level block container. Think of the text inside a tag. They are all ‘inline’ with one another while the tag itself is a block-level container. By understanding this behavior we can use the display property to inline our content next to each other. Since all of our elements remain in the normal flow, we have no issues with a collapsed parent element. In my opinion this is a much cleaner solution which still achieves the desired result. I hope this helps! If not....my apologies.
What is the benefit of wrapping both in a third container div, rather
than just using the inline-block display to put them side by side?
None, the former is actually worse, as it will give you more markup than needed and also make a responsive layout more difficult.
There is many ways to do this and each have its pros and cons, so may I suggest to use the most modern approach, flexbox, which will give you a whole new way to make it responsive, fully dynamic, where the image can have one size and the text will take the remaining.
.parent {
display: flex
}
.parent div {
flex: 1;
margin-left: 10px;
}
<div class="parent">
<img src="http://placehold.it/150" alt="image">
<div>
Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image.
</div>
</div>
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 am trying to place some links between my top area and bottom area so that they overlap both of them by an equal amount. I have the navmenu div set to a larger z-index than all the other div's but I can't get it to overlap anything. site is at http://www.joekellywebdesign.com/churchsample1/index.html
stylesheet is at http://www.joekellywebdesign.com/churchsample1/css/styles.css
Thanks in advance for the help.
Many ways to do it.
You can simply specify a negative margin for your navmenu
#navmenu {
margin: -10px 0;
}
Since you have specified the position as relative, which means the location of the div will depend on previous div. Its top would be the top plus the height of the previous div.
You can either change the position into absolute, or adjust the margin or padding values to display content inside the div in your way.
z-index will only be effective when elements are overlapping. In your case, all divs are in relative position. None of them is overlapping.
You could for instance do the following:
<div id="navmenu">
<div class="inner"><h1>Test text</h1></div>
</div>
and than in CSS:
#navmenu .inner {
padding-bottom: 15px;
margin-top: -15px;
position: relative;
z-index: 200;
background-color: #F00;
}
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;
}