I have some text that I want simultaneously centered on the page and the text within the paragraph to be adjusted to the left? A little help?
this is what I've been trying
<p align="center"><div align="left>text<br>more text</p></div>
obviously not working this just shifts everything left
What the troubling part (although IE is always different) is that in order for an item to be centered the horizontal margins need to be set to auto (allowing the browser to actually center the content). So, with that being said:
p.centered {
margin: 0px auto;
width: 300px;
border: 1px solid #f0f;
}
<p class="centered">This is your paragraph</p>
The width is your call (and I've added a border for clarity) but just set the side margin to auto and the content will be left-aligned (unless otherwise specified by text-align).
align="center" and align="left" are deprecated. Use CSS instead.
Here's one way to do it (assuming you want 2 nested elements, or see Brad's method for centering a single element): http://jsfiddle.net/EzNJQ/1/
<div id="outer">
<p id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
#outer{
width: 300px;
margin: 0 auto; /* centers */
}
#inner {
text-align: left;
}
More examples: http://www.w3.org/Style/Examples/007/center.en.html
Related
I basically have a container with inside two blocks: one block will have a dynamic width (based on the text within it) and the other one should be the same width of the dynamic width. If the second block has a major width since the text inside, it have to break the text in order to keep the same width of the first block.
<container>
<fixed_dynamic>
Lorem ipsum dolor sit amet
</fixed_dynamic>
<samedynamic>
few words
</samedynamic>
</container>
I could achieve something doing in this manner: https://jsfiddle.net/prxus5vm
The problem is that if I try to write something in the second width that make the div stretch, it will not break the words: https://jsfiddle.net/prxus5vm/1/. It should break the words and keep the width of the first block.
Any solution? I'm searching for a CSS solution, want to avoid to use javascript if possible.
If you are trying to use the table-layout properties to shrink down a parent as much as possible,you are missing a small width being set.
Once you have this done, the first element can be a block of text or an image. Finally white-space:nowrap comes handy to avoid text to wrap and set the width you are looking for.
div {
display: inline-table;/*NEEDED inline for demo it is still using the table-layout */
width: 1%; /*NEDEED or 0 , see it alike a min-width */
margin:5px /* not needed here */
}
div * {
padding: 0.25em ; /* not needed here */
margin: 0; /* not needed here */
}
div h1 {
background: green; /* not needed here */
white-space: nowrap; /* NEDEED */
font-size:1.1rem /* not needed here */
}
p {
background: yellow; /* not needed here */
}
<div>
<h1>
Lorem ipsum dolor sit amet
</h1>
<p>
more words than fixed dynamic block
</p>
</div>
<div>
<h1>
A shorter text
</h1>
<p>
more words than fixed from dynamic block
</p>
<p>
and a few more words
</p>
</div>
<h1>BUT, there is a disclaimer !</h1>
<div>
<h1>
short
</h1>
<p>
here are words that are themselves longer than the reference ....
</p>
</div>
I added width: fit-content; to fixed width container, now the width will be equal to content width, and added script that take the width of the first container and assign it to your dynamic container
var fixed_width = $("fixed_dynamic").css("width");
$("samedynamic").css("width", fixed_width);
console.log(fixed_width)
container {
display: table;
}
fixed_dynamic {
display: block;
width: fit-content;
background: green;
}
samedynamic {
display: block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<container>
<fixed_dynamic>
Lorem ipsum dolor sit amet
</fixed_dynamic>
<samedynamic>
more words than fixed dynamic block
</samedynamic>
</container>
I have encountered a rather pesky bug which only seems to happen with Internet Explorer. I have created a jsFiddle to illustrate my frustration.
<div class="container" style="width: 802px;">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
The 4th block does not clear to the left even though the top three blocks are of the same computed height. Does anyone know of any solution/hack for this?
I need this to work with min-height, not height and I cannot use clear: left.
Thanks in advance,
Ian
The problem is due simply to the fact that the first two blocks are 1 pixel taller than the other two.
This causes the 4th block to catch the right edge of the 2nd block.
If you set the height of .block to 160px, for example, you will see that they wrap as you intended.
This is a common problem if floated elements have non-similar heights.
Note: The reason the behavior may appear to be browser dependent may have to do with the default font and font size that may vary across browsers. If you were to use a slightly smaller font, then the first two blocks would be slightly shorter and all the blocks would then take on the min height of 155px, and be the same, so the problem would not manifest itself. (Set font-size: 0.75em on .block and see what happens!)
$('.block').each(function (i) {
$('body').append('height of block' + i + ': ' + $(this).outerHeight() + '\n');
});
.container {
width: 802px;
border: 1px dotted blue;
overflow: auto;
}
.block {
float: left;
width: 33.333%;
background-color: #bbb;
padding: 40px;
border: 10px solid #fff;
box-sizing: border-box;
min-height: 155px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing eli.</div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscin.</div>
<div class="block">Lorel eum</div>
<div class="block">Lorem ipsumdentur parum clari,um.</div>
</div>
Okay, so I know it's frowned upon to use tables for layout, so I tried using DIVs etc, and got myself completely tangled in knots and without managing to achieve the layout I needed - and thus resorted back to a table.
The layout's actually relatively simple, but it seems there's a couple of features that make it a little tricky (for me at least) in CSS.
There are just 2 rows. The top row has two cells of equal width. These contain text, and should automatically resize to the correct height.
The other row contains an iframe. It should be the full width of the container, and take up the remaining container height.
I tried a few approaches, including using CSS like display:table-cell etc, but because my second row would require colspan="2" that simply does not work. Using floating divs doesn't seem to work very well either, because how do I get my second row - I don't want to have to resort to absolute positioning, because then I'd have to assume a fixed height for the top row.
Any CSS experts out there who can get me on the right track?
Here's an example demonstration what I currently do using a table (jsfiddle link below).
HTML...
<div id="cont">
<table>
<tr height="1%">
<td><p>How would you do this with DIVs / CSS?<br />
Some text. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod
</p></td>
<td><p>Some more text.<br />
These two cells have indeterminate size.<br />
They should only take up the minimum height.
</p></td>
</tr>
<tr>
<td colspan="2">
<div id="iframe">
An iframe will go here.<br />
I'm just using a div for
illustrative purposes.
</div>
</td>
</tr>
</table>
</div>
CSS
#cont {
position: absolute;
left: 4px;
right: 4px;
top: 4px;
bottom: 4px;
}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: top;
}
#iframe {
width: 100%;
height: 100%;
border: 1px solid green;
}
http://jsfiddle.net/z8qum850/
This is very easy to do with CSS. Something like the following would give what you asked about:
HTML
<div id="wrapper">
<div id="row1">
<div id="first-cell"></div>
<div id="second-cell"></div>
</div>
<div id="row2"></div>
</div>
CSS
div {
border:1px solid black;
}
#wrapper {
height:auto;
width:100%;
}
#row1 {
display:table;
width:100%;
}
#first-cell,#second-cell {
display:table-cell;
height:200px;
}
#row2 {
width:100%;
height:200px;
display:block;
}
Using display:table and table-cell, the child div elements will automatically fill the width, but you need to use a wrapper to keep them contained. So, if you were to remove the width declaration on the #wrapper element, you'd collapse everything because the child elements don't know how much space to fill. Here's a CodePen demo showing the result of the code.
What I am trying to do is have a div element at a specific Y location, but floating to the left or the right (so that the other text on the page will flow around it). I can't seem to find the right combination of attributes..
position:relative;float:right works but the div is at the top of the containing element
position:relative;top:1in;float:right moves the div down, but the area that the text flows around is still at the top of the area, not the +1in area
position:absolute disables the float entirely
Here is a simple example:
<div style='position:relative;top:1in;float:right;border:0.1in solid;'>
<p>This is on the right</p>
</div>
<p>This is the text that should flow around the textbox. Make as long as needed...</p>
What I really want is regions but no browsers really support this yet.
Any ideas? Thanks..
If you want to offset a float from the top, with text flowing around it, you have to insert another zero-width float above it to achieve the offset. Like this: http://jsfiddle.net/YKYmj/7/
#floater {
float: right;
clear: right;
border: 1px solid gray;
background-color: #ccc;
margin: 10px;
width: 100px;
height: 100px;
}
.wrapper:before {
content: '';
float:right;
height:1in;
}
<div class="wrapper">
<div id="floater">In offset, floated box</div>
<p>Lorem ipsum dolor sit amet, consectetur ...
</div>
I have a the following:
<div class="container">
<div class="sectionA">
</div>
<div class="sectionB">
</div>
</div>
Section A has a red background, Section B has a blue background.
Section A has lots of text in it, making it quite tall, section B does not have much text in it.
How can I make it so that Section A and B are the same height as the parent?
Yes, you can give the childs the same heights as the parent. This will work:
<html>
<head>
</head>
<body>
<div class="container">
<div class="sectionA">Lorem ipsum dolor sit amet.
</div>
<div class="sectionB">Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
The CSS:
.container{height:200px;width:500px;overflow:hidden}
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%}
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}
If you dont mind about using jquery,
$('.sectionB').css('height', $('.sectionA').outerHeight() );
sectionB css height is set by the sectionA outerHeight.
Take a look to this jsbin.
Hope this helps!
If you want to do this in dynamically, I think you need to use jquery/javascript to handle otherwise you can use height property. Use the suitable highest value for both sections.
Faux-Column Effect Using <div> and CSS
One way of doing this involves adding an extra element as follows:
<div class="container">
<div class="backdrop"></div>
<div class="sectionA">
<p>Text of A... can be on a red background.</p>
<p>Lorem ipsum dolor... and long text block.</p>
</div>
<div class="sectionB">
<p>Text of B... can be on a blue background.</p>
</div>
</div>
I am going to add an extra element <div class="backdrop">, which you could replace with an pseudo-element if so desired.
The appropriate CSS is as follows:
.container {
overflow: hidden;
color: white;
background-color: red;
position: relative;
}
.sectionA {
float: left;
width: 48%;
padding: 1%;
}
.sectionB {
float: left;
width: 48%;
padding: 1%;
position: relative;
z-index: 2;
}
.backdrop {
position: absolute;
background-color: blue;
width: 50%;
height: 3000px;
top: 0;
left: 50%;
z-index: 1;
}
The parent .container element is given the background-color for the left-hand side column (red), with overflow: hidden and position: relative.
The two child/column elements are placed using float: left, and given a relative width of 48% and padding of 1% (you can adjust these measurements as needed).
Finally, .backdrop is positioned absolutely and placed to the right hand side of the parent container. I set it to have a tall height to make sure that it stretches beyond any expected height of any of the two columns, and declare the background-color: blue.
Use z-index to move the floated .sectionB to be painted above .backdrop. Note that you need set position .sectionB relatively so that the z-index value takes effect.
Since .container uses overflow:hidden, the tall backdrop element is clipped so you can the effect that you want.
Using a background-image could also work. You could create a background image with the left hand side red and the right hand side blue, and tile it vertically with position top and center, just making the width is wide enough to accommodate any expected page width.
The main advantage of using div.backdropis that you can alter the color scheme using CSS properties alone without changing the background image.
Fiddle demo: http://jsfiddle.net/audetwebdesign/yejss/