I have a special structure of divs and want for both divs the same height without setting height in css. Can anybody help me and explain why the following jsFiddle doesn't work as I want it?
I've tried a lot of things from similar questions here. But nothing works for me perfectly.
jsfiddle
<div class="div-table">
<div>
<div>Date</div>
<div style="white-space:nowrap">
<div class="input-field">
<input>
</div>
<div class="input-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAfJJREFUSEutlquSAjEQRSORSCQSiUQikUgkEonE8QlIPgGJRCKRSCQSiURm96Rysz0hM5t93KquSbrTzzQdnK/E5XLx5/O5QbXodHK73fxqtfKDwcA7596o3+/75XL5rcOik8fjEZStweFw6KfTaaLRaNSQw7ter9FCE29OOIhBKeOsTZlMN5tNyIizvV7PH4/HKP1CwwnGpEBk9/s9SrpB5pRVgeWOkhMMKgOi/w12u13KiEYRkpP5fJ4y+AvW63WwMx6PIyc6oUyKgNQFeKISSvLX65W6UWULUnUSUQhW2a4tLM+uVbbJZBL2Ds+6bLpFyI3me2B5do1NqgKPu3ZcEBv63gJeTjm65Lrj/X7vHXVjA/M/sd1ug93wDZ4+NzVtyzmoBtauOxwOYbNYLKK4HbUOgDJhIjiGGxt1Qhd+4kQTIHTa8/kMnQCxFkoG4YksSjxNj9BYMGazWWDgVSgpllA6p47FEQhSdRi/VHpckAFrxPJymUDp4XMfIJ1g1iDgwnJYg1AX1Eh2RCUNNQBUehNqwAzUL71R+vgNUG/nh2pAYBpPdJbFW+4abhAlPJ1OUVIG0fM8SCd3AIoFJir754EuYUJzXzjly6Xad54ytWXfeot0GUr2vS8RwRCAfYdytDqxoCRED1EasmBd99/L+w8meYWhCGsXpAAAAABJRU5ErkJggg==">
</div>
</div>
</div>
You will have to add few more divs having table properties like :demo
.table {
display: table;
width: 88%;
}
.row {
display: table-row;
}
Related
We are animating a calendar using GSAP. The calendar is draw using css table, row and caption...
We wanted to animated some part of this table.
But better than words here is a codepen to open on safari:
https://codepen.io/anon/pen/rmrJRy
var body = document.getElementById('body')
TweenMax.to(body, 1, {x: 400});
.table {
display: table;
width: 500px;
}
.header-group {
display: table-header-group;
}
.body {
display: table-row-group;
}
.caption {
display: table-caption;
}
.cell {
display: table-cell;
border: solid 1px blue;
text-align: center;
}
.row {
display: table-row;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div class="table">
<div class="caption">Fevrier 2017</div>
<div class="header-group">
<div class="row">
<div class="cell">L</div>
<div class="cell">M</div>
<div class="cell">M</div>
<div class="cell">J</div>
<div class="cell">V</div>
</div>
</div>
<div class="body" id="body">
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
</div>
</div>
</div>
PS: I just decided to hack around with some position absolute. But would like to hear to better solutions.
The key point in your example is the "TweenMax" operation, which will adds a "transform" property to the "body" class. It seems a bug of Safari: if a positioned element, or a element who creates a new stacking context, appears as a child element of the table, a re-render bug of caption will be caused in Safari.
Unfortunately, there seems no better solution, for now.
Absolute position maybe the best choice you should rely on.
Yes, here maybe a better solution. We already known that Safari cannot handle the situation we've mentioned above by itself, appropriately. So, we can try to tell it how to prepare a rerender for the table caption. Adding a will-change property to the caption element is the way. In this case, we add the will-change with the value "transform" to the caption. Then, everything will be Okay.
The details about will-change property could be checkout here
I have two div's that I am trying to position side by side but am having trouble. I understand that div's are block elements but I have never had trouble positioning them side-by-side before..
HTML:
<div class="contact">
<div class="team" id="staff-1">
<div id="DIV_2">
<img id="brian" src="../img/brian.png">
</div>
</div>
<div class="team" id="staff-1">
<div id="DIV_2">
<img id="brian" src="../img/brian.png">
</div>
</div>
</div>
I do not want to post all of the CSS because it is rather long for a SO post, but here it is loaded in a jsfiddle: http://jsfiddle.net/rynslmns/5pQJ7/
You can either use floating or inline-block elements:
.team {
float: left;
width: 33%;
}
OR
.team {
display: inline-block;
width: 33%;
}
I would choose "display: inline-block" as you don't have to clear the floating afterwards.
IDs "staff-1", "brian" and "DIV_2" are repeated. DOM id is unique.
You simply need to use css float to get them to be side by side.
.contact {
overflow: hidden;
}
.team {
float:left;
}
Here is your example code:
http://jsfiddle.net/jcfB3/
Note, your IDs were incorrect, you can't have 2 IDs that have the same value, I made them unique. Also, utilizing floats without any other content in a bounding block element has some issues which I fixed in the example code. See http://www.quirksmode.org/css/clearing.html for more info. It is the reason why I added overflow: hidden.
How to make a div stop wrapping?
Set this style on your div. It works in Chrome and IE. I haven't tested other browsers.
overflow: auto;
Do you mean you want <div class="objectives"> to appear below <div class="icon">? If so, div.objectives { clear: left; } should do the trick.
Or do you want the entirety of <div class="objectives"> to appear alongside <div class="icon">? If so, div.objectives { float:left; } should make it happen. You may also need to specify a width on div.objectives. Alternatively, remove the float code and set both div.objectives and div.icon to { display: inline-block; vertical-align: top; }.
This works just edit the code and replace it with the code below
<div class="icon"><img align="left" alt="" src="/resource/uploads_scope/issues/090113/090113_pairedText_featuredSkills.png"></div>
<div style="overflow: auto;">
<h5>Featured Skills:</h5>
<p>Compare and contrast; vocabulary; shades of meaning.<br>
<strong>Other Key Skills: forming and supporting a claim, inference, author’s craft, key ideas.</strong></p>
</div>
<div style="clear:both;">
</div>
</div>
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>
Given the following code:
<div id='upperDiv' style='min-height:200px'>
<div id='rightDiv' style='float:right; width:75%'>
content1
</div>
<div id='leftDiv' style='float:left; width:25%'>
content2
</div>
</div>
<div id='lowerDiv' style='height:50px; margin-top:5px'>
content3
</div>
When content of rightDiv and leftDiv passes the 200px height (the value of min-height), upperDiv does not grow, so its content overlaps the lower div.
If the float attribute is removed from the large content, it grows and causes problems.
I do not know which of rightDiv or leftDiv exceeds 200px inheight.
How can this be fixed?
Set #upperDiv any of the following:
overflow: hidden;
width: 100%;
or
float: left;
width: 100%;
or create a rule using CSS pseudo-elements (IE8+ compatible) like this
#upperDiv:after {
content: "";
display: table;
clear: both;
}
Best solution
Creating a reusable class rule like the following.
.group:after {
content: "";
display: table;
clear: both;
}
Now you can apply it to anything that needs this same functionality. For example...
<div id='upperDiv' class="group" ... >
P.S. If you require IE 6/7 compatibility, checkout this post.
This is intentional as floats are designed for things like images in paragraphs (where multiple paragraphs can wrap around the image).
Complex Spiral has a fuller explanation as to why and Ed Elliot describes a number of approaches to making containers expand around floats. I find the overflow: hidden approach works best in most situations.
After
<div id='leftDiv' style='float:left;width:25%;'>
content2
</div>
add
<div style="clear:both"></div>
It will solve your problem.
There is a new property introduced recently display: flow-root; Which will fix this issue without any hacks and have almost all major support
<div id='upperDiv' style='border: 1px solid #000000; display: flow-root;'>
<div id='rightDiv' style='float:right;width:75%;'>
content1
</div>
<div id='leftDiv' style='float:left;width:25%;'>
content2
</div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
content3
</div>