I have multiple floated blocks. Is it possible to specify which block should be cleared?
Check following structure:
+------------+ +--------------------+
| | |+--------+ +-------+|
| float:left | ||fl left | |fl left||
| | |+--------+ +-------+|
| | |+------------------+|
| | || ||
| | || block that clears||
| | || prev 2 floated ||
| | || blocks but doesn't|
| | || clear first fl. ||
| | || block ||
| | |+------------------+|
| | +--------------------+
+------------+
in html:
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
You need to float the parent block on the right hand side "left" as well. You can float and clear in sub-containers and the parent container will not clear.
I see you added an example now. Float left the DIV "right-column"
This is basic HTML/CSS layout. Take a look at this JSFiddle example.
When you clear a float, it will usually only clear floats within the same container, or lower. This is why when you put something with clear: both into your container at the top level it clears everything.
I have solved it with following html. Thank you for your help. Is it ok solution for my problem (it works but I don't know it works in other browsers and etc.)?
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div class="floated-left-with-100-precent-width">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div class="clearfix"></div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
This is probably pretty easy to do using bootstrap. If you're designing a new site from scratch, bootstrap's an excellent place to start anyway..
Related
I'm trying to populate two columns with some content in the following way (this is expected behavior)
<div id="identifier_0"></div> | <p id="paragraph_0"></p>
|
------------------------------| -------------------------
<div id="identifier_1"></div> | <p id="paragraph_1"></p>
|
|
|
----------------------------- | -------------------------
<div id="identifier_2"></div> | <p id="paragraph_2"></p>
----------------------------- | -------------------------
every paragraph_n is provided by my Rails backend. Every identifier_n is autogenerated on the fly by a javascript script (because they identify the paragraph to the right, which might change because of user input)
I want the paragraphs column to be contenteditable=true as a whole (so users can join paragraphs or split a paragraph into many, or basically edit the text inside) and identifier column to be contenteditable=false, so my javascript is the only one allowed to change them.
Currently it looks like this:
<div id="container" contenteditable="true">
<p id="paragraph_0" class="paragraph"></p>
<p id="paragraph_1" class="paragraph"></p>
<div id="identifier_0" class="identifier"></div>
<div id="identifier_1" class="identifier"></div>
</div>
But this makes both columns, the paragraphs and the identifiers, inherit the contenteditable=true attribute. And I only want the paragraphs column to have it.
Is there a way to do what I want?
Thanks in advance
(Answer in comments ==> just add contenteditable="false" to the identifier_n, and it will do it even if wrapped inside a contenteditable="true" div)
I want to present name, phone and email like this:
| Joe Shmoe | 555-555-5555 |
| | joe#shmoe.net |
And when the name get's too long, I want to wrap like this:
| Josephine | 555-555-5555 |
| Hosssenpfefer | jfine#mail.net |
And when the email get's too long, I want to overflow like this:
| Joe Shmoe | 555-555-5555 |
| someverylongemail#mail.net |
I created this html, which defines a row with two half-width columns. The right hand column has two nested rows, and each of those nested rows has a full width column...
<div class="row">
<h5 class="col-xs-6 list-group-item-heading">Joe Shmoe</h5>
<div class="col-xs-6">
<div class="row">
<p class="col-xs-12 list-group-item-text text-right">555-555-5555</p>
</div>
<div class="row">
<p class="col-xs-12 list-group-item-text text-right" style="color:navy">joe#shmoe.net</p>
</div>
</div>
</div>
This almost works, but as you can see in this fiddle, the bottom nested row won't right-align. (You might need to make the view narrow to see the problem).
I'd like it right aligned just like the nested row above it. Furthermore, when the content is long, I'd like that content (not wrapped) to overflow on the left side, spilling into the left column if necessary.
Can someone give advice? Thanks!
I would try using a table for this. It might need additional styling, but find tables make it easier to handle the longer characters. Is this at all on the right track?
<div class="col-xs-12">
<table class="table">
<tr class=""><td class="col-xs-6">Joe Shmoe</td><td class="col-xs-6 text-right">555 555-5555</td></tr>
<tr class=""><td class="col-xs-6"></td><td class="col-xs-6 text-right">somereallylongemailaddress#reallylongemail.com</td></tr>
</table>
</div>
I'm a noob to html programming, but basically I want to have 3 divisions that look something like this:
| | |
| 1 | 2 |
| | |
-------------------
| |
| 3 |
| |
Right now, I'm using bootstrap and I can have columns beside each other using the div classes. But that only works if I want to do columns. For example:
<div class=col-lg-6>
Also, I can't use a fixed size, because div2 might be bigger than div1 or vice versa depending on the info that I get. Any suggestions to how I can do this?
I'm not entirely sure what you're asking. Did you want something like this?
https://jsfiddle.net/Garconis/zqptbjur/
This is utilizing Twitter Boostsrap CSS:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background: gray;">
Content1
</div>
<div class="col-xs-6" style="background: wheat;">
Content2
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background: tan;">
Content3
</div>
</div>
</div>
If you don't want to use javascript, you can make those divs have fluid width like 30%, 70% and set their display property to 'inline-block', set the wrapping div's white-space property to 'nowrap'. After that, adding a br tag will drop the third div down. ..or you can just use table layout which I'd never suggest.
Is it possible in bootstrap to move div from one row to another?
I need something like this:
Desktop/tablet:
-----------------------------
|Brand |search| #row1
-----------------------------
|Menu: | MAIN CONTENT |
|-link 1| | #row2
|-link 2| |
|-link 3| |
------------------------------
Mobile:
-----------
|Brand | #row1
-----------
|Menu: =|
|-link 1 | #row2 (expanding/collapsing navbar with menu and search form)
|-link 2 |
|-link 3 |
| search |
| |
| Main |
| content | #row2
| ... |
| ... |
-----------
On mobile, i need to move search form from #row1 to collapse menu in #row2.
Unfortunately, no. There's no way to accomplish this as you currently have it. One possible compromise would be to have the original search box become invisible at a certain screen size and have another search box, identical in functionality, that is shown where you need it at that point. For example:
<div class="row">
<div class="col-xs-12 col-sm-6">
Brand
</div>
<div class="col-sm-6 hidden-xs">
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<ul class="menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="visible-xs-block">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-8">
<main>Main Content</main>
</div>
</div>
Obviously you don't want to make a habit of this kind of thing, but sometimes the optimal layout requires you to do things like this.
Gah lost all my rep opening a Bounty and now I can't comment.
Would it be a viable option to start using a framework? Not to promote any framework in particular but personally I started using Zurb Foundation for the reason you have described alone. http://foundation.zurb.com/
I've seen this somewhere before and it worked really nicely. But I can't remember where.
Anyway, here's my desired form.
Enter a message:
+--------------------------------------------+
| |
| |
+--------------------------------------------+
|
| Enter recipients:
| +------------------+
[Send to everyone] OR | |
| +------------------+
|
| [Send to these users]
You mean like on StackOverflow?
Just inspecting the DOM will tell you what you need to know: The line is an absolutely-positioned element with a left-border, and the "or" has a background colour the same as the body to cover up the line around it.
See this jsfiddle for an example. The idea is you offer the user two options in the HTML...
<span class="screen-reader-text">Choose one of the following options:</span>
<ul>
<li id="send-to-everyone">
<!-- omitted -->
</li>
<li id="enter-recipients">
<!-- omitted -->
</li>
</ul>
...and then style the first <li> so it will float:left and have a border-right. Add some :after content to create the "or".