I need to set width or max-width in order for margin:auto to work, right? Like in this jsFiddle.
Trouble is, the paragraph width is equal to max-width and so the block of text is not properly centered.
How can I make the width of the paragraph contract to be only just big enough to contain the text, expanding to max-width as necessary?
No javascript and no fixed widths. Thanks.
I'm not sure, but maybe an inline-block paragraph is what you're looking for:
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
div { text-align: center; }
p { display: inline-block; text-align: left; max-width: 40ex; }
http://jsfiddle.net/wuqaH/1/
did you try to set a max-width / or a width in percentage ?
It would be like that :
div {
width: 100%;
background: red;
}
p {
margin: 0 auto 0 auto;
background: blue;
max-width: 90%; }
you can try it on your jsFiddle.
Hope this will help you.
Do you want to center the text in p, why not use text-align:center; property
http://jsfiddle.net/H7qrp/5/
Related
no javascript and no screen width media queries
I am trying to find a css-only way to achieve the situation depicted in below image. I couldn't find a way to create the following:
a line of blocks (inline blocks or floated blocks) with variable width, aligned to the right of the line using float:right or right text align
elements that don't fit on the line, wrap to the next line. All elements after the first line have their own line.
I've been experimenting around with several strategies to no avail, I have a feeling that flexbox might help but I'm not very experienced with flexbox and couldn't find a way to use it.
A few things that I have tried:
try to put the elements' content in a :before pseudo element, using content:attr(data-content). The element itself would have no width. On the next line there would be a left floating element with a width of 99.9% that pushes each element on a next line. The problem with this is that the elements on the first line should maintain their normal width and I didn't find a way to do that. The :first-line pseudo-selector is limited to words on the line and doesn't work for inline containers on the line
Alternative to above method: also add :after pseudo elements which are absolutely positioned and have the same content as the :befores. The :before elements would only show on the first line and don't wrap, the :after elements would form the vertical list on the right. Also with this way I walked into a dead end.
UPDATE:
I made a (less) fiddle that works when the elements' widths are fixed and equal. Unfortunately fixed width, so not yet what I want to achieve. If you want to help me you could perhaps use this as a starting point. I put the content in a :before so perhaps it could overflow the element and somehow fix the element width to auto.
currently CHROME only: http://jsfiddle.net/2px3b63j/7/
html:
<div class="pusher"></div>
<nav>
<a data-title="First" href="#"></a><a data-title="Second" href="#"></a><a data-title="Third" href="#"></a><a data-title="Fourth" href="#"></a><a data-title="Fifth" href="#"></a>
</nav>
less:
#h: 3em;
#w:6em;
* {
margin: 0;
padding: 0;
}
body {
font: 0.9rem sans-serif;
background: #666;
}
.pusher {
float: left;
width: ~"calc(100% - " (#w * 1.01) ~")";
height: #h * 6;
-webkit-shape-outside: polygon(0 #h, 100% #h, 100% 100%, 0 100%);
}
nav {
position: relative;
text-align: right;
background: white;
height: #h;
line-height:0;
a {
position: relative;
text-align:center;
width: #w;
max-width: 100%;
display: inline-block;
background: white;
text-decoration: none;
color: #333;
font-weight: bold;
height: #h;
line-height: #h;
&:before {
content: attr(data-title);
}
}
}
LINK TO ANSWER: https://jsfiddle.net/ky83870x/1/ doesn't work in Internet Explorer but I assume it works in Edge. If anyone can find a way to make it work in IE, I will be very interested to know
One posibility to get your output using flex box.
Make the flexbox so narrow that any child will fit. That forces the children to go one in a row.
Add a pseudo element before the first child to force an extra margin.
Justify the flex as needed
And place the flex to the right, because now everything is to the left.
The elements are color coded to see easily what is happening
.container {
display: flex;
flex-flow: row wrap;
border: solid 1px red;
width: 10px;
left: 500px;
position: absolute;
justify-content: flex-end;
}
.container div {
font-size: 20px;
margin: 5px;
background-color: lightblue;
display: inline-block;
flex-basis: auto;
flex-shrink: 0;
}
.container:before {
content: "";
margin-left: -500px;
flex-basis: 10px;
background-color: yellow;
height: 6px;
}
<div class="container">
<div>Lorem</div>
<div>Ipsum dolor sit amet</div>
<div>Consectetur adipisicing elit</div>
<div>Unde saepe</div>
<div>Placeat neque mollitia</div>
<div>Accusamus fuga</div>
<div>Lorem</div>
<div>Ipsum dolor sit amet</div>
<div>Consectetur adipisicing elit</div>
<div>Unde saepe</div>
<div>Placeat neque mollitia</div>
<div>Accusamus fuga</div>
</div>
I've a HTML markup, where the typographical content are inside of <p>-tags. Between these tags, there I want to place some images. These images are always the same size: 100% wide, 50% high.
To avoid some distortions, I set a <div>-tag with this size and set the image as a background-image with the cover-size.
This <div> doesn't contains any content, except the background-image. So my sizing won't work, because I can't set it to position: absolute / fixed;, beacuase it wouldn't fit anymore between the <p>-tags.
So how I'm able to size the empty div without losing the the fit?
The HTML markup:
<div class="container">
<section class="about">
<div class="content">
<p>Lorem ipsum dolor</p>
<div class="img"></div>
<p>Lorem ipsum dolor</p>
</div>
</section>
</div>
And the CSS style
.container,
.container > section{
position: fixed;
height: 100%;
width: 100%;
}
.container > section{
overflow:auto;
}
.container > section > .content > p{
padding: 5% 15% 5% 15%;
font-family: Arial, sans-serif;
font-size: 1.8em;
line-height: 1.5;
}
.container > section > .content > .img{
width:100%;
height:50%;
background: url(http://www.hdcarwallpapers.com/walls/widescreen_lamborghini_lp710-wide.jpg) no-repeat center center;
background-size:cover;
}
And a CODEPEN DEMO
I think the problem is the height. Try removing the 50% height and instead add padding of 50%
.container > section > .content > .img{
display: block;
width:100%;
padding: 0 0 50% 0;
background: url(http://www.hdcarwallpapers.com/walls/widescreen_lamborghini_lp710-wide.jpg) no-repeat center center;
background-size:cover;
}
Here's a demo.
I'm not sure what problems you're referring to when you say you want to avoid 'distortions', as by far the simplest solution here is to include the image(s) themselves actually in the markup, and then add some styling to make them responsive.
However, you can achieve what you want with your approach (only browser support suffers). You know the ratio that you want the image to display at. First off, remove the width: 100% from the .img div (it's a div, it will fill the horizontal space). Then, add your 50% as padding:
.img {
padding-bottom: 50%;
}
When you set a height (or vertical padding here) as a percentage, you're actually setting it as a percentage of the width of the parent. That means your .img div will always have padding equal to half of the .content div, which is what you're after.
This is the same approach that's necessary to get fluid videos and iframes working. Check out this CSS Tricks article for a good explanation of what's going on.
I'm using a 2-column div layout where the widths of both the left and right columns is non-deterministic. The left column div holds an image. The right column div holds a header div and a text content div below it. The width of the left column image takes precedence over the right column, and the right column gets the scraps in terms of width. Both of these columns are inside a div container, which has a fixed height (and width, but that doesn't matter). This layout is working using the following code:
.container {
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.left {
float: left;
}
.right {
overflow: hidden;
}
.scrollable-content-header {
font-size: 25px;
border-bottom: 1px solid black;
}
.scrollable-content {
font-size: 18px;
overflow: auto;
}
The text content div should be scrollable if it overflows the container height. But I can't get the scrollbar to appear on the .scrollable-content element. Here's some HTML:
<div class="container">
<div class="left">
<img id="image" src="http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png"/>
</div>
<div class="right">
<div class="scrollable-content-header">Lorem Ipsum</div>
<div class="scrollable-content">
Lorem ipsum dolor sit amet, consectetur... etc.
</div>
</div>
</div>
If the container element has overflow: auto instead of hidden, then a scrollbar will appear. But it will allow scrolling of the entire container. I don't want that, only the .scrollable-content should be scrollable, not including the header. I'm assuming that the overflow: hidden trick on the right column div in order to achieve the fluid width effect is causing problems.
Here's a fiddle: http://jsfiddle.net/PJdNW/
Any help is appreciated.
UPDATE
From what I understand, CSS cannot figure out what the height of the scrollable-content needs to be, so in order for the scrollbar to work and be the correct height, the pixel height of the scrollable-content needs to be set.
In my case, the height of the overall container is dynamic, so I opted for a JS solution, which gets the height of the overall container and subtracts the height of the scrollable-content header in order to get the pixel value I need for the scrollable-content (plus some fine-tuning i.e. margins).
I'll leave this question open for the moment in the hopes that I'm wrong and CSS is up to the task.
You have to set the height of your container, otherwise the container will automatically resize to the content length. Also, set the overflow attribute to scroll. Fix below:
.container {
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.left {
float: left;
}
.right {
overflow: hidden;
}
.scrollable-content-header {
font-size: 25px;
border-bottom: 1px solid black;
}
.scrollable-content {
font-size: 18px;
overflow: scroll;
height:200px;
}
Updated fiddle: http://jsfiddle.net/hdrenollet/PJdNW/1/
I have a page in which expanding content flows out of the holding div, the relevant CSS is below as well. Simply removing the height:510px line will allow the div to expand as needed. However, new users who have no content will not have any height and the page will look unblanced. How do I set a minimum height?
.Bb1
{
width:680px;
height:510px;
background-color:#ffffff;
float:left;
border-right:3px solid #edefed;
border-radius: 10px;
}
CSS allows a "min-height" property. This can be used to set the minimum height of the div you're talking about.
#div-id { min-height: 100px; }
Incase you want to set a minimum/maximum height and minimum/maximum width to a div, CSS allows the specific feature.
To set the minimum width of the div or any other class/id/element, use;
min-width: 150px;
To set the minimum height of the div or any other class/id/element, use;
min-height: 300px;
Similarly for setting maximum width and height of a div or any other class/id/element, use;
max-width: 600px;
max-height: 600px;
Important:
For your div to expand freely in height and width after data is available for users; you will have to set the width/height to auto immediately after you have set the min-width or min-height.
min-width: 300px;
width: auto;
min-height: 100px;
height: auto;
min-height:510px;
css has a min-height attribute
Here is d way through which you can set min height of a div
<div id="bb1" style="min-height:200px;>
.....
</div>
or apply
#bb1{
min-height:200px;
}
if you have used class
like
<div class="bb1">
in div then use
.bb1{
min-height:200px;
}
.comments { min-height:650px;height:auto; }
<div class="comments">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi.</div>
Do this:
.minHeight {
min-height: 100px;
height: auto;
border: 1px solid red;
/* IMPORTANT -- always set 'height: auto;' immediately after the min-height attribute */
}
<div class="minHeight">
this div has a min-height attribute
</div>
At the moment I have a container div
#container {
margin: 0 auto;
margin-top: 10px;
width:800px;
background-color:#eaeced;
}
within that div I'd like to add a content box which I've done like this
#contentbox {
background-color: #fff;
width: 400px;
margin: 5px;
}
As soon as I write some text into the #contentbox div.. this div covers the whole of the #container div... I have tried using padding but this increases the original size of the container..
I've just tried to add margin: 5px; but this will create the space only on the sides.. not on the top or the bottom.. :(
Sorry I'm quite new at this and would appreciate some help
Thank you :)
Not a lot of information, but I think what you're after is something like this:
#container {
margin: 0 auto;
margin-top: 10px;
width: 790px;
background-color:#eaeced;
padding: 5px;
}
#contentbox {
background-color: #fff;
width: 400px;
padding: 1px 0;
}
p {margin: 1em 0;}
presuming HTML like this:
<div id="container">
<div id="contentbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
first of all move the required padding onto the #container, you can adjust the width of the #container to be your required width, less the total left/right padding - this will keep the width of the box as you want.
Then you have collapsing margins going on - though margin collapsing is correct behaviour you won't see it in IE unless you add specific margins - adding a specific margin to the <p> or any other content in the box will be required to get consistent behaviour even though it's the opposite of what you probably want.. the p should have default margins and they're what's collapsing outside the the #contentbox in some browsers (e.g. FF).. once you add specific margin all browser will then exhibit collapsing margin behaviour though some collapse the background internally and some externally so it looks weird.. however
adding 1px top/bottom padding (or a border would do it too) to the the inner #contentbox will fix that and make sure the actual content margins stay inside the content box
The result is I think what you're looking for.. but if not leave a comment or update your question with some code or a JSFiddle example