I need to move up the fourth column right beneath the first column. Is there any possibility to do this in css?
<body>
<div class="fleft">1 Lorem ipsum dolor sit amet</div>
<div class="fleft">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="fleft">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="fleft">4 Lorem ipsum dolor sit amet, consectetur.</div>
<div class="fleft">5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>
CSS
body { width:600px;}
.fleft{ float:left; width:200px;}
Please refer the fiddle
http://jsfiddle.net/9xbGC/
Given your original structure - No there isn't (with sole css and without dirty hacks). The fourth column has to obey the height of the third one.
Perhaps this jQuery Plugin can help you:
http://masonry.desandro.com/
Only way you can do it with pure CSS is to have 3 columns and split your content up between them.
you can do this using position absolute and setting top and left for each , but you should do this using javascript if you don't know height of each
or you can use jquery plugin: http://www.wookmark.com/jquery-plugin
No, only if you could rely on a specific height of the first div.
#div4{
position: absolute;
margin-top: 20px;
}
Not with floating, since float only adjusts the flow of elements, not their order.
You may go for absolute/relative positioning, javasscript.
Specify widths of the divs so that the 4th div would fit between the first and third divs, and then when you float the 4th collumn left it should sit right.
Edit:
You can also Use the awesome grid system that comes with Twitter Bootstrap, it's very useful and can sort out a serious amount of layout issues.
http://twitter.github.com/bootstrap/
Related
I have the following division container:
<span> Lorem. </span>
<div style="display: inline-block; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
As expected, the division container acts like an inline-level element.
When I alter the value of the display property to "inline flow-root", the division container no longer acts like an inline-level element and instead acts like a block-level element:
<span> Lorem. </span>
<div style="display: inline flow-root; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
According to the Mozilla Developer Network documentation, the "inline-block" value should be equivalent to "inline flow-root".
Why does the two values produce different display results?
Thanks in advance.
As per the answer given in link,
display: flow-root; Needs Chrome Canary or Firefox Nightlies.
sets it to display: table; or display: block;
May be you can use overflow: visiible to contain float-ed elements.
How can I avoid a highlight overlap when I select the text that has a line-height lower than the font-size?
Example:
*::selection {
background-color: grey;
}
p {
font-size: 24px;
line-height: 20px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
The only way I've been able to solve this is by making the background-color transparent and just changing the text color. I'd like to still have the background color though.
Example
*::selection {
background-color: transparent;
color: red;
}
p {
font-size: 24px;
line-height: 20px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
I don't think there is a way, the selection background has to cover the whole alphabet, including all the special characters like ƒ, È, ¡, and so on.
I had exactly the same problem and it is quite relevant for the esthetics of a website. especially serif fonts come with a tall line height which is definitely too much if you use them for short text and greater font size. it's disappointing that there is no solution.
Why can you see the background of the selected text overlapping at all if the background color is not transparent? the browsers must apply an effect like multiplying.
And what does the text selection highlighting really depend on? it seems like it depends on the native line height of the font, which is, especially of some free web fonts, ridiculously high, let's say just wrong. But then there is no way to correct that.
Well, erm... no, not really.
This isn't really possible because the background covers all the text, so if the line height is under the size of the font size, there will be overlaps. However, you can sort of hide the background overlaps by setting the background to a slightly (and only very slightly) transparent background.
Something a bit like this:
*::selection {
background-color: rgba(0, 125, 255, 0.99);
}
p {
font-size: 24px;
line-height: 20px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
I am trying to scrape dynamically generated pages with BeautifulSoup, sometimes I get loose text and somethings I don't.
How can I extract the loose text below, I tried to use next sibling but the text is not contained in any tags.
<div class="div1">
<table class="table1"></table>
<ul></ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
What you might do is use a css selector with select div.div1 ul and match the next_sibling
html_doc = """
<div class="div1">
<table class="table1"></table>
<ul></ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
"""
from bs4 import BeautifulSoup
result_page = BeautifulSoup(html_doc, 'html.parser')
for text in result_page.select("div.div1 ul"):
print(text.next_sibling.strip())
I want titles for my blog posts to automatically be "evened out" in width. Also, the top line should always be longer than the bottom line, but they should always be similar in width.
Please note that I'm looking for a CSS only solution. I know I can do this easily with JavaScript or PHP, but I'm just wondering if there's an easier responsive solution.
An example below:
Default behavior:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Want I want:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
You'll need to use:
width in vw
font-size in vw
text-align: justify
I am struggling with how to specify in CSS (with media queries) a layout involving a heading, a diagram, and text, which needs differ depending on whether we're in portrait or landscape mode. It's targeting an iPhone-sized device, so space is at a premium.
In portrait mode, I want it to look like
HEADING
XXXXXXXXXXXXXXXXX
XXXX XXXX
XXXX Diagram XXXX
XXXX XXXX
XXXXXXXXXXXXXXXXX
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
In landscape mode, I want it to look like
HEADING XXXXXXXXXXXXXXXXX
XXXX XXXX
Lorem ipsum dolor sit XXXX Diagram XXXX
amet, consectetur XXXX XXXX
adipisicing elit, XXXXXXXXXXXXXXXXX
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
The HTML is composed of an h3 tag for heading, an IMG tag for the diagram, and one or more p tags for the text, currently in that order. I can re-arrange these any way I want, and/or add grouping div's if necessary.
Assuming the HTML elements are ordered as heading/image/text, I get the portrait layout by default. For landscape, if I simply specify the diagram as float: right;, I get
HEADING
Lorem ipsum dolor sit XXXXXXXXXXXXXXXXX
amet, consectetur XXXX XXXX
adipisicing elit, XXXX Diagram XXXX
sed do eiusmod tempor XXXX XXXX
incididunt ut labore et XXXXXXXXXXXXXXXXX
ore magna aliqua.
But I want to top of the diagram aligned with the heading, to avoid wasting blank space to the right of the heading.
I can also float the heading left, but then I get something crazy like
HEADING Lorem ipsum dolor XXXXXXXXXXXXXXXXX
amet, consectetur XXXX XXXX
adipisicing elit, XXXX Diagram XXXX
sed do eiusmod tempor XXXX XXXX
incididunt ut labore et XXXXXXXXXXXXXXXXX
ore magna aliqua.
But if I add a CSS rules such as p {clear: both; } then the text jumps down to below the diagram as in
HEADING XXXXXXXXXXXXXXXXX
XXXX XXXX
XXXX Diagram XXXX
XXXX XXXX
XXXXXXXXXXXXXXXXX
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
I do not want to depend on scripting to move elements around.
Can someone think of a simple approach to accomplish what I want to do here?
Use your solution of floating the image right and the heading left, but instead of clear: both on the p tag use clear:left.
See this jsFiddle which does what you need, I think.
I personally think Fluid Grid Layout
of Dreamweaver CS6 will help you to achieve this. You may find all the info you need in the link above or go straight to watch this video from Adobe site to learn how it works. This is a short piece of info that you may want to know
Fluid Grid Layout helps you build pages that adjust to fit different screen sizes.You design the layouts visually, and Dreamweaver displays them in Live View. You can create pure CSS3 transitions to display animation effects on computers, smartphones, and tablets