I want to show a popup using qTip1 with 2 divs, the first one contains a picture and has to be on the left, the second one has some text in a table and has to be on the right. The problem is when I create the inner HTML for qTip, the table with the text is always under the picture and not on the right. I've tried some solutions here on stackoverflow but I think I'm missing something.
This is what the generated inner HTML for qTip looks like:
<div id="infoBoxParent" style="margin: 20px 20px 0 0; border: 1px solid #333; overflow: auto">
<div id="infoBoxPicture" style="float: left; border: 1px solid green;"><img
src="foo.png"
alt="" width="111" height="170" class="photo left" style="float: left;"/></div>
<div id="infoBoxFacts" style="float: right; border: 1px solid red; overflow: hidden">
<table>
<tr>
<td style='padding:5px;text-align:left;'>Some Text:</td>
<td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional
and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A
sites. With your help, we're working together to build a library of detailed answers to every
question about programming.
</td>
</tr>
</table>
</div>
</div>
What am I doing wrong?
If I am understanding your question this should work. It is from a css framework I built(Responder). I removed a lot of code so it highlights the solution to your question. The .reponsive-image class is not necessary but I added it because you are using images in your project.
If you want to change the width of your columns you can add classes to your style sheet in the folowing fashion:
.column25{
max-width:25%;
width:25%:
}
There is a link below for Responder that has a lot of these classes typed out already if you need to copy them.
Link to Solution Preview: http://codepen.io/larryjoelane/pen/OMEoMq
Link to Responder CSS framework: http://codepen.io/larryjoelane/pen/XmzQba
CSS:
/*makes an image responsive*/
.responsive-image {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
/* responsive container for the column classes*/
.row {
/*set the max width of the .row class to
*to 100% so the columns within it do not exceed
*a sum of 100% combined
*/
max-width: 100%;
/*keeps the .row divs next each other when the screen
resizes*/
overflow: hidden;
}
.row div {
/* adjust the aspect of the font
* so it displays well and within the div elements
* when the screen is resized
*
*/
font-size-adjust: 0.45;
line-height: 1.5;
/*provide some spacing in between the lines*/
float: left;
/*removes spacing between in line elements*/
clear: none;
/*removes spacing between in line elements*/
display: inline-block;
/*make the div elements align horizonatally*/
/*styling below prevents padding and borders from breaking
the max-width setting of the columns*/
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
/*allow long words to wrap to another line*/
word-wrap: break-word;
}
/*begin section for styling the column widths*/
.column50 {
max-width: 50%;
width: 50%;
}
HTML:
<div class="row" id="infoBoxParent" style="border: 1px solid #333; overflow: auto">
<div class="column50" id="infoBoxPicture" style="border: 1px solid green;"><img src="foo.png" alt="foo image" width="111" height="170" class="photo left" style="" /></div>
<div class="column50" id="infoBoxFacts" style="border: 1px solid red; overflow: hidden">
<table>
<tr>
<td style='padding:5px;text-align:left;'>Some Text:</td>
<td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers
to every question about programming.
</td>
</tr>
</table>
</div>
</div>
You could try to remove all the inline css and put the following code in the header.
This should work.
<style>
#infoBoxParent {
margin: 20px 20px 0 0;
border: 1px solid #333;
overflow: auto;
width: 100%;
}
#infoBoxParent div {
position: relative;
float: left;
border: 1px solid;
}
#infoBoxPicture{
border-color: green;
width: 30%;
}
#infoBoxFacts{
border-color: red;
width: 68%; /* 2% margin for the lines */
}
</style>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to achieve this type of table so that I can have extended labels for columns. But I don't even know what it's called to try and describe it in a search.
Edit
I can find how to round html borders with CSS. But that doesn't help with linking rows to columns. I can rotate the column header text, but again, that isn't what I'm after.
The closest thing I can come up with is a full table with borders or a background colour to highlight the connection, but this would be squared instead of rounded.
I'm wondering if there is a method of achieving this with css. Or alternatively a library which would do the same thing.
I have never heard about something like this. In general, you cannot curve any element like that, supposing that link is normal part of table (tr/td).
I have created some small thing here, making the curvers, than you can add it over your table to make that feeling, but note, that you cannot write inside it, and most umportantly, it will not work, as this will not look precise across browsers and zoom (tested on another projects, where I needed also some circled things)
So you should better design your table in other way.
Anyway, here is a snippet with rounded linked things
.circ, .circ2, .circ3 {
position:absolute;
border-radius: 50%;
display: inline-block;
background-color: transparent;
border-top: 1px solid black;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
transform: rotate(45deg);
}
.circ{width: 180px;
height: 180px; top:0; left:0;}
.circ2{width: 135px;
height: 135px; top:23px; left:22px}
.circ3{width: 80px;
height: 80px; top:50px; left:50px;}
.container{position:absolute; top:20px; left:20px; border:1px dotted black;width:200px; height:200px;}
<div class="container">
<div class="circ"></div>
<div class="circ2"></div>
<div class="circ3"></div>
</div>
Als read this - this is full list of transforms, that browsers supports:
https://www.w3schools.com/cssref/css3_pr_transform.asp
This is a close mockup to what you were looking for
https://codepen.io/anon/pen/dZrXPd
I wrote part of it in SCSS because it's easier for me, and the snippet here is a compiled version of it...
ul {
list-style: none;
padding: 0;
width: 400px;
float: left;
}
ul li:nth-child(1) {
background-color: blue;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: red;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
.round-edges {
float: left;
width: 80px;
background-color: grey;
height: 70px;
margin-top: 15px;
border-radius: 0 50px 0 0;
position: relative;
}
.round-edges .round1 {
background-color: blue;
height: 70px;
width: 75px;
border-radius: 0 50px 0 0;
}
.round-edges .round2 {
background-color: green;
height: 50px;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 25px 0 0;
}
.round-edges .round3 {
background-color: red;
height: 33px;
width: 25px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 20px 0 0;
}
tr td:nth-child(1) {
width: 400px;
}
tr td:nth-child(2) {
background-color: red;
width: 20px;
text-align: center;
}
tr td:nth-child(3) {
background-color: green;
width: 20px;
text-align: center;
}
tr td:nth-child(4) {
background-color: blue;
width: 20px;
text-align: center;
}
<div class="clearfix">
<ul>
<li>
Last Col
</li>
<li>
Middle Col
</li>
<li>
First col
</li>
</ul>
<div class="round-edges">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
</div>
</div>
<table>
<tr>
<td>
Something
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Some other thing
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Something Completely Different
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
</table>
??? Use id or number + legend
#1 #2 #3
left mid right
L M R
Or, may be better, if you create image.
But, you can still use border-radius + position in table row. May be its not work cross-browser, as you wish.
http://border-radius.com
(write 40 to black input box on site, for example)
I have a situation where I need to specify that a child's width be 100% of the INNER width of the parent, not the outer width, meaning that the parent scrolls horizontally.
The situation looks similar to this:
http://codepen.io/anon/pen/ygqPZG?editors=1100
HTML
<div id='parent'>
<table id='child1'>
<colgroup>
<col width='400px'></col>
</colgroup>
<tbody>
<tr>
<td>Child1withareallyreallylongtitle</td>
</tr>
</tbody>
</table>
<div id='child2'>
<p>Child 2</p>
</div>
</div>
CSS
#parent {
margin: 16px;
border: 1px solid black;
box-sizing: border-box;
overflow-x: auto;
}
#child1 {
width: 100%;
border: 1px solid red;
}
#child2 {
width: 100%;
border: 1px solid blue;
}
As you shrink the screen small enough that the table (chld 1) stops shrinking and it forces the parent to overflow and thus show the scrollbar, the second child still retains 100% of the OUTER width of the parent, I would like it to be 100% of the INNER width of the parent so that it is the same width as the first child (table).
I would like to keep the answer as pure of CSS as possible, JavaScript would be fine as long as it doesn't rely on window resize events because the #parent may be shrunk for other reasons (a horizontal sibling grows).
Do you have to keep the long title as one line? if not, you can try this code;
#parent {
margin: 16px;
border: 1px solid black;
box-sizing: border-box;
box-sizing: border-box;
}
#child1 {
width: 100%;
border:1px solid red;
box-sizing: border-box;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
#child2 {
border:1px solid blue;
box-sizing: border-box;
}
<div id='parent'>
<table id='child1'>
<colgroup>
<col width='400px'></col>
</colgroup>
<tbody>
<tr>
<td>Child1withareallyreallylongtitle</td>
</tr>
</tbody>
</table>
<div id='child2'>
<p>Child 2</p>
</div>
</div>
It took me quite a while to understand what you were getting at, but I think I understand now. You just want the child2 div to span the full width of the parent element, when the child1 table causes a horizontal scroll to appear.
This guy explains the problem pretty well. After reading it I can see that what you are trying to achieve isn't possible with the HTML structure you have and without out using JS. He explains that you can do it by applying inline-block to the parent and applying a min-width of 100%, but that only works on the main browser windows horizontal scrolls.
Here is a display table solution if you are happy to change your HTML.
#parent {
overflow-x:auto;
border: 1px solid black;
/* margin for display purposes in full screen snippet viewer */
margin-top:80px;
}
.table {
display:table;
width:100%;
}
.table-row {
display:table-row;
}
.table-cell {
display:table-cell;
}
.child1 {
border: 1px solid red;
}
.child2 {
border: 1px solid blue;
}
<div id="parent">
<div class="table">
<div class="table-row">
<div class="table-cell child1">
I live in Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.
</div>
</div>
<div class="table-row">
<div class="table-cell child2">
Child 2
</div>
</div>
</div>
</div>
Add box-sizing: border-box; rule to #child2:
body {
padding: 0.1px;
}
#parent {
margin: 16px;
border: 1px solid black;
box-sizing: border-box;
overflow-x: auto;
}
#child1 {
width: 100%;
border: 1px solid red;
}
#child2 {
width: 100%;
border: 1px solid blue;
box-sizing: border-box;
}
<div id='parent'>
<table id='child1'>
<colgroup>
<col width='400px'></col>
</colgroup>
<tbody>
<tr>
<td>Child1withareallyreallylongtitle</td>
</tr>
</tbody>
</table>
<div id='child2'>
<p>Child 2</p>
</div>
</div>
About border-box, see it here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.
border property will increase elements width since it adds to outer space except td elements.
Your child 2 element has border property thats why your getting scroll bar
This stackoverflow link explains it better
Apologies, I misunderstood the question completely.
Are you looking for this output
<div id="top">
<div id='parent'>
<table id='child1'>
<colgroup>
<col width='400px'></col>
</colgroup>
<tr>
<td>Child1withareallyreallylongtitle</td>
</tr>
</table>
<div id='child2'>
<p>Child 2</p>
</div>
</div>
</div>
CSS
#top{
margin: 16px;
border: 1px solid black;
box-sizing: border-box;
overflow-x: auto;
}
#parent {
width : 100%;
display :table;
}
#child1 {
width: 100%;
border: 1px solid red;
}
#child2 {
width: 100%;
border: 1px solid blue;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
There seem to be various methods of creating a horizontal three column div layout:
Position: relative/absolute;
Float: left/right; with margin: 0 auto; for center div
Float: left; for all divs
Display table / table-cell
Any thoughts on which is best practice and the advantages/disadvantages of each approach.
Thanks,
Edit1: Example edited to include line heights
Edit2: One requirement which I forgot to mention is that columns should all be of equal height, thanks #LGSon for pointing that out.
Edit3: added new method - 4. Display table / table-cell. I know this just feels wrong but in the absence of any other working solutions looks like the best option available at the moment.
1. Position: relative/absolute;
<div id="mainContent" style="position: relative; width:95%; margin: 0 auto; background-color: lightGrey;">
<div style="position: absolute; left: 0%; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="position: absolute; left: 33.5%; width: 33%; background-color:green;">Middle</div>
<div style="position: absolute; left: 67%; width: 33%; background-color:yellow;">Right<br>line2</div>
</div>
<br><br><br>
2. Float: left/right; with margin: 0 auto; for center div
<div id="mainContent" style="overflow: hidden; width:95%; margin: 0 auto; background-color: lightGrey;">
<div style="float:left; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="float:right; width: 33%; background-color:yellow;">Right<br>line2</div>
<div style="margin: 0 auto; width: 33%; background-color:green;">Middle</div>
</div>
<br>
3. Float: left; for all divs
<div id="mainContent" style="overflow: hidden; height:100%; width:95%; margin: 0 auto; background-color: lightGrey;">
<div id="left" style="float: left; width:33%; background-color:blue;">Left<br>line2</div>
<div id="mid" style="float: left; width:33%; background-color:green;">Middle</div>
<div id="right" style="float: left; width:33%; background-color:yellow;">Right<br>line2</div>
</div>
<br>
4. Display table / table-cell
<div id="mainContent" style="width:95%; margin: 0 auto; display: table;">
<div style="display: table-cell; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="display: table-cell; width: 33%; background-color:green;">Middle</div>
<div style="display: table-cell; width: 33%; background-color:yellow;"> Right<br>line2</div>
</div>
In general, use flexbox, its newest and modern way for layout, the other one's can sometimes be at hand when one simply can't use or solve it with flexbox, though that is quite rare.
With flexbox you get exactly that, flexibility, and here is a great article about it: A guide to flexbox
.mainContent {
display: flex;
width:95%;
margin: 0 auto;
}
.mainContent > div {
flex-basis: 33.33%;
}
.mainContent > div:nth-child(1) {
background-color:blue;
}
.mainContent > div:nth-child(2) {
background-color:green;
}
.mainContent > div:nth-child(3) {
background-color:yellow;
}
<div class="mainContent">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
Update based on comment/question edit
Since equal height is a requirement, it is either the above flexbox or the below display: table (unless you want to use script or resort to the old holy grail concept)
These two offers dynamic content without the need of fixed height and can easily switch between stacked vertically or horizontally, using a media query.
.mainContent {
display: table;
width:95%;
margin: 0 auto;
}
.mainContent > div {
display: table-cell;
width: 33.33%;
}
.mainContent > div:nth-child(1) {
background-color:blue;
}
.mainContent > div:nth-child(2) {
background-color:green;
}
.mainContent > div:nth-child(3) {
background-color:yellow;
}
<div class="mainContent">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
Here's my summary of options:
Your first example (Position: Absolute) -- I'd steer away from this, as it's by definition unresponsive to different screen widths and devices.
Second example (Float: [mixed]) -- this one will work, but it takes a lot of hard-coding float values, which will make it difficult to edit later or apply to other layouts with four items per line, for example. Aim for reusability!
Third example (float: left) -- this definitely works if you want everything left-aligned, but not much else.
I agree with #LGSon; Flexbox is the way to go, unless you want to use Bootstrap or a similar framework with a grid system: http://getbootstrap.com/css/#grid
sometimes simple is the best. I would stick with the third alternative, but as you see you have to give a positive value for margin property.
I would use this solution for your problem:
HTML CODE
<div class="left blue">Left</div>
<div class="left green">middle</div>
<div class="left yellow">right</div>
CSS CODE
.left {
float: left;
width: 33%;
margin: 10px 2px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
I'm encountering an issue with scrollHeight and offsetHeight that I suspect is a product of abusing the css rendering engine.
I'm attempting to get an accurate scrollHeight or offsetHeight for an element in the following context.
CSS
.transitionHeight {
overflow: hidden;
transition: height 1s;
}
.closed {
height: 0 !important;
overflow: hidden;
padding: 0 !important;
border: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
width: .1rem;
}
HTML (snippet)
<div class="fullHeight closed" id="addressTarget" style="height: 1119px;">
<div class="widget bar contact" id="addressDetails">
<div class="column left">
Header:
</div>
<p class="column right">Information</p>
<div class="column left">
Header 2:
</div>
<a href="" class="column right">
More Details
</a>
<div class="column left">
Like us on Facebook at:
</div>
<a href="" target="_blank" class="column right">
Even More Details
</a>
</div>
</div>
Calls to document.querySelector("#addressDetails").clientHeight and document.querySelector("#addressDetails").offsetHeight are both returning a seemingly random integer when the closed style is applied to the #addressTarget, when #addressTarget does not have the closed style attached either call returns an accurate value. Ideally the code should be able to calculate the correct height while the style is applied to avoid an FOUC, is there a way to get this value?
The goal here is to set document.querySelector("#addressTarget").style.height to the value returned by the height check to create a reliable slide down. If the javascript call cannot return the required height is there a css rule that can be applied to .heightTransition that will a) represent a transition target and b) be calculated correctly?
(While the exact definitions of .column .left and .right are not required to solve this problem I'm including them here in case they are useful, however the best place I can pull them from is the original .scss so I'm providing them in sass rather than css:
$rook: 500px;
$bishop: 750px;
.column {
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 1rem;
box-sizing: border-box;
&.left {
width: 100%;
vertical-align: top;
text-align: center;
#include applyWiderThan($rook) {
width: 33%;
text-align: right; }
#include applyWiderThan($bishop) {
width: 20%} }
&.right {
width: 100%;
overflow: scroll;
border: 1px solid mix($gold, white, 20%);
border-radius: 10px/10px;
#include applyWiderThan($rook) {
width: 65%;
border: none;
border-radius: none; }
#include applyWiderThan($bishop) {
font-size: 1.5rem;
width: 78%} }
}
How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label> </label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami
You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163
I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami