I'm trying to make responsive design. When screen is small comments should be below "Slikica"(Cyan DIV). But when I'm on the desktop version I want comments (Gray divs) to be warped around image.
Cyan div has fixed width, and float left.
Gray divs has unknown length (max 200chars), and they should be right to Cyan div. They are also floated left.
If I set them width, 300px for example everything will work fine.
Look at image below, worth thousand of words.
<div id="content">
<div id="slikica">Slikica</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
<div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
<div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
<br class="clrfix" />
</div>
jsFiddle link
Just remove the float: left; on the comment DIVs. When floating each comment left to previous one, they won't fit into the viewport.
http://jsfiddle.net/feeela/Xtuc9/1/
Try adding the following CSS to the comments' div element:
display:inline;
If you remove float: left; from your gray divs and add a left margin equal to (or larger) than the cyan div width they will occupy the space to the right. If there are more gray divs they will however not wrap around the cyan div because of the margin. I don't know if this behavior is wanted. Otherwise you could just skip both the margin and the floating and have them wrap around the cyan div.
The problem is that your divs will expand to reach at maximum the width of their container (in that case, the <div id="content">). When they reach a width too big to fit aside the blue, they get clip down. What you need is to put something that prevent them from reaching that width.
You have two option to do this.
Put a div with a width: 600px (or whatever fit in that space) and put every gray div in it. JSFiddle (You'll need to expand the result window to see that it work)
Put a max-width on every div (example: max-width: 600px)
Related
Firstly the definitions:
Scroll position is the current position of the scroll-handle on the scrollbar.
Position of the scrollbar is the side of the element(div) the scrollbar is positioned on (default for ltr is left)
I want to have the vertical scrollbar positioned on the right side of a div (representation of a tree), while still having the content ltr. I quickly found at least two ways to do it.
Now I have still a problem when applying any of the solution that the horizontal scrollbar position is initially set to the right. As my content is still ltr the scroll-position is at the end of the content, which is not at all what I wanted to achieve. Furthermore Users would have to "scroll back" to the all of the content, which is rather bad UX).
There is the possibility to set the scroll position with Javascript but sadly I can not use Javascript in this case.
.main {
width:150px;
height:150px;
direction: rtl;
overflow:scroll;
}
.inside {
direction: ltr;
width:300px;
}
<div class="main"><div class="inside">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam lectus vel erat feugiat, id maximus quam iaculis. Etiam vitae eleifend nisi. Phasellus pellentesque dui ex. Proin sit amet metus quis quam sagittis pretium at ac velit. Mauris ultricies metus nec tortor dignissim, in pellentesque libero consectetur. Nullam nec enim sit amet leo congue finibus. Curabitur ligula dolor, aliquet eget erat et, laoreet vehicula nibh. Suspendisse eu lacus sapien. Nulla facilisi. Nulla placerat mauris sit amet ultrices sollicitudin. Quisque sed bibendum ante. Integer id magna sollicitudin, scelerisque neque vitae, tincidunt quam. Integer et aliquam sem, at tempus dui. Etiam sit amet ornare lacus, at placerat leo. Donec pharetra diam sit amet nisl dapibus suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. SedNulla placerat mauris sit amet ultrices sollicitudin. Quisque sed bibendum ante. Integer id magna sollicitudin, scelerisque neque vitae, tincidunt quam. Integer et aliquam sem, at tempus dui. Etiam sit amet ornare lacus, at placerat leo. Donec pharetra diam sit amet nisl dapibus suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed</div></div>
Here is an Example Fiddle
Tested on Firefox:
Update:
I did achieve the effect I wanted in a fiddle but it does only work with fixed pixel values, which is not an option.
I found the answer today.
It is to use flex-direction: row-reverse and min-width.
So now I can delete the JS workaround hack which did never worked fully.
.main {
display: flex;
flex-direction: row-reverse;
width: 150px;
height: 150px;
direction: rtl;
overflow: auto;
}
.inside {
direction: ltr;
display: block;
min-width: 300px;
}
See Fiddle
I've currently got two tables, one for past and one for upcoming events, as seen in this picture.
As you can see, the widths of the columns in the first table isn't aligned with those in the second (since the event name of the second is longer than the first). I was wondering if it was possible to align them while still dynamically adjusting column width, or if the only solution is to set the column width beforehand.
you can control the width of column by setting css max-width ,hope this will help you to control the overflow even if your content have dynamic length.I added an example with max-width below.
p{
max-width: 150px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
I am trying to get my text to align. I have a <p> and my text goes all the way from the left of the webbrowser/screen till the right. But I want it to be away from the left and right ends of the screen. I know of the alignment code "center, right, left, etc.". I need it to be left aligned, but not right next to the screen, like if the whole <p> was indented on both sides.
You would want to either put it within a containing div, or apply padding to the <p> tag. It would look like this:
.container {
width: 80%;
margin: 0 auto;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
</div>
OR
<p style="padding:0 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
You can simply add some padding, margin-left/margin-right, or another solution like that.
Try adding;
text-align: left;
margin-left: 5%;
to your CSS.
You can change the margin-left value to be an amount of pixels (e.g. 50px;) or leave it as percentage of it's parent element.
You said you wanted the text left aligned but not have it touch the left side of the page. Here is a JSFiddle of that:
https://jsfiddle.net/zfvhgr0x/
you can do this simply by keeping the width attribute as is and just including the following into your CSS:
padding: 0 5px;
This will add a space of 5 pixels to the left of your text, and the right of your text. This means that if your text would reach the end of the screen, it would stop 5 pixels before the end.
You can set each indent individually, as explained below:
padding: 5px(top) 7px(right) 2px(bottom) 10px(left)
When putting this in code, you do not want the brackets. These are just there for demonstration purposes to explain what each of the numbers will target.
Hope that helps!
I have an HTML structure like this:
<div>
<div style="position:relative;">
<div style="position:absolute;float:left;top:0;left:0;width:50px;">57</div>
<div style="width:550px;position:absolute;float:left;top:0;left:50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
As you can see from THIS FIDDLE, My Lorem Ipsum text overlaps with my paragraph. I tried putting somme <br /> between my div and my paragraph, but they still overlap. I want my paragraph to appear after my text. Any help please?
Thank you
You don't use position:absolute with a float. You can just use the float in this case and get rid of position and the related css.
Just this would be fine:
<div>
<div style="position:relative;">
<div style="float:left;width:50px;">57</div>
<div style="width:550px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
Though, as the comments suggest - you should put this in a stylesheet and avoid inline declarations. It's cleaner and tends to be easier to maintain.
Remove your position absolute and put clear: both to your paragraph to reset the floating elements
<div>
<div style="position:relative;">
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;left:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec im.</div>
</div>
<p style="clear: both;margin-left:40px">This is my paragraph</p>
</div>
Live exemple here
If you are using floats why are you mixing it with absolute positions?
I've changed this a little.
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;margin-left:40px;">
Try this one. By the way, I've added clearfix method too, as it is recommended to clear floating spaces when you are not floating anything anymore.
If you don't want them, you can remove the div with .clearfix and the CSS.
Here you go.
Looks like you've got the unholy duo of absolute positioning and float:left without a "clear". This means your first child div with those two children will have no height whatsoever. I recommend removing position:absolute and float:left from these divs, using instead:
display:inline-block;
vertical-align:top;
This will allow them to flow left -> right and have a height within the page flow.
I need to have a floated element after the content/text that's supposed to flow around it in my code for SEO reasons. Usually floats are done like so:
CSS:
#menu {
float: right;
width: 180px;
padding: 10px;
background: #fcc;
margin: 0 0 15px 15px;
}
HTML:
<div id="menu">This is a right float. The long text flows around it.</div>
<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra.
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at,
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec,
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet,
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut,
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis
a nibh. Integer ipsum. Vestibulum lacus diam, varius in,
blandit non, viverra sit amet, sapien. Sed porta sollicitudin
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>
But I need to have the HTML like this:
<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra.
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at,
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec,
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet,
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut,
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis
a nibh. Integer ipsum. Vestibulum lacus diam, varius in,
blandit non, viverra sit amet, sapien. Sed porta sollicitudin
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>
<p id="menu">This is a right float. Because it's placed below the text in code,
it also appears that way.</p>
Basically, I need this HTML to look like the previous example (HTML and CSS). How can I do this?
The width of the floated element is constant, but the height can change. The content has to flow around it. The reason I need to have it this way is because the floated element is the menu, which doesn't contain any important text and is usually the same for many pages, so the content should be topmost in the code.
This recent question may be the same
Wrap text around right floated column where left column appears first in html
the solution involves floating a empty "spacer" div right , this spacer is first in source, it should have the width and height of the content to be in the right side - in the link a solution including a bit of jQuery to get the height - the position the actual menu over the top of the floated spacer
a JS fiddle example produced from that link : HERE
Simple you have add the following css
#content {
float: left;
width: 300px; /* put here the width you want */
}
demo: http://jsfiddle.net/qTDLr/1/
Edit: make sure that the sum of #content and #menu width is less than the container width.
You could just use a table. This 'sidebar before content' problem of CSS has been a huge step backwards in terms of accessibility.