I have a "backend engineering constraint" that's forcing me to order my markup in a non semantic way but visually my team needs a different order. I was successfully able to achieve this with flex box and have attempted to polyfill with flexibility.js for IE 10 and 9. Unfortunately both 10 and 9 are having issues.
Note that I can not use jQuery/DOM manipulation to move "third" section around.
Does any one else have alternate suggestions or fixes that can help achieve the following:
Markup:
<div class="first">
<div class="second">
<div class="third">
But they need to visually see the following in IE 10 and 9:
So "first" and "third" need to appear visually as apart of the same section and the "second" section needs to be underneath and go full width of container.
Please see my full working codepen (fully working in chrome): http://codepen.io/semantictissue/pen/MypRVz
Any suggestions or help to make this cross browser friendly?
The easiest solution I've found is to position .third as absolute. To visually section off .first and .third, add CSS to .first which leaves room for .third to be set in the remaining space.
body { margin: 0; position: relative; }
.first { height:50px; width: 50%; background: blue; }
.second { height:50px; width:100%; background: gray; }
.third { height:50px; width: 50%; background:green;
position: absolute; top: 0; right: 0; }
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
Here is your modified CodePen
The main downside to this approach is that it doesn't reflow the content as the window gets smaller. Media queries would have to be used at certain window sizes which change the width and positioning of the elements as needed. Using a CSS table layout would be useful once the content can be wrapped onto its own line. Info here
Related
This is my first question so I'll try my best to get my point across as coherently as I can.
Lets assume something like:
<div id="parent">
<div id="child1">shot text</div>
<div id="child2">very long text</div>
</div
What I'm asking is is there a way to "link/lock" #child2 width to #child1's width or #parent's so that #child2 never exceeds #child1's width.
Is there anyway, using only CSS, I can force #child2 (or #parent) to have the same width as #child1, without fixing #parent's and #child1's width?
The point is that I want to be able to edit the contents on the fly (like translations) of both #child1 and #child2 but as #child2 will always have more words it will always be wider.
PS: Don't forget, using only CSS, no JavaScript.
Edit: Done a fiddle https://jsfiddle.net/ricardojcmarques/seckdugj/5/
Basically what I need is the green box to be the same width as the orange box, without giving the orange box (nor the brown) any width. Using the width the browser needed to render it correctly.
So just Improvised on your suggestion, the key here is to set
#parent{
background: brown;
position: absolute;
left: 0;
height: 0;
margin: 0;
padding: 0;
}
Heres is a working JSfiddle
DEMO
A little bit of a hack but it might work.
<div id="parent">
<div id="child1">short text that will expand and expand
<div id="child2">very long text that will remain within the confines of child1
</div>
</div>
</div>
#parent {
position:absolute;
background-color:green;
padding:5px;
padding-bottom:0;
}
#child1 {
position:relative;
background-color:#fff;
}
#child2 {
position:absolute;
border:5px solid green;
border-top:none;
margin-left:-5px;
margin-right:-5px;
}
EDIT
Have a look at this one, it's a little closer to yours but I have to modify the list in order to nest child2. I don't know if you have a specific style you need to set to the parent div but if you do it will take some more thought.
Demo2
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
When I assign a percentage height in the following div, why does it get out? Thanks you in advance.
HTML:
<div id="div1">
Test<br/>Test<br/>Test<br/>Test<br/>
<div id="div2">Test</div>
</div>
CSS:
body{
margin: 0
}
#div1{
position: absolute;
width: 200px;
height:100%;
right: 0;
background-color: #467
}
#div2{
width: 50%;
height: 99%;
background-color: black;
color: white
}
Well, the reason why #div2 extends below #div1 is because in addition to being 100% the height of its parent, #div2 is also pushed down by the four lines of text above it - so it extends exactly that distance outside of #div1.
How to solve this, then? Well...I can offer a CSS solution, but it's not very flexible (a solution that employs JavaScript would definitely be more scalable, and less work to maintain). I modified your HTML structure slightly, so now it looks like:
<div id="div1">Test
<br/>Test
<br/>Test
<br/>Test
<div id="div3">
<div id="div2">Test</div>
</div>
</div>
To clarify my changes, I added the #div3 element around #div2. Now, for my CSS, I just added this definition for #div3, and modified the body CSS to:
body {
margin: 0;
line-height:1.3em;
}
#div3 {
position:absolute;
top:5.2em;
bottom:0;
left:0;
width:100%;
}
This approach requires that you know how far from the top of #div1 you want #div3 (and its child #div2) to start, which by extension requires you to know exactly how tall those four lines of text are. Since browsers often render text with slightly different line heights, I specified one for the <body>. After that, it is a fairly simple matter of multiplying that line height by the number of lines of text (four in this case), and setting that as the top attribute.
Here's a JSFiddle to demonstrate what this achieves. I hope this answer was clear, and is what you're looking for! If not, let me know and I'll try to help further. Good luck!
it gets out because of the overflow property you are missing. Set it to hidden on #div2 ok?
good question. Test<br/>'s count as extra size. same if you use padding, it counts extra size. You can use position absolute to child element. I fixed the problem. check this fiddle
in div1, use position: fixed; instead of position: absolute;
jsfiddle
I wanna center this image in the center of the frame see picture below:
I use overflow hidden so you cant see the things on the outside of the frame
I need this to be done with only css - no scripts at all, cause its used in 3rd party software that doesn't allow scripts.
Besides this i need to be able to size the image so it needs to be stated as a image tag
See the fiddle for the elements it must contain. Last but not least it must be css 2.1 at the max so (no css3)!
Here is a fiddle on the frame
And the HTML:
<div class="frame">
<img src="http://preview.fonqi.com/img/explain2.jpg" width="200" />
</div>
The css:
.frame{
width:200px;
height:200px;
border:2px solid black;
overflow:hidden;
}
.frame img { margin-top: -50%; }
Moves the image up by half it's length.
DEMO
You can also use positioning....
.frame img { position: relative; top: -50%; }
DEMO
try the below
Add this line in CSS img{ margin: -100px 0px;} it will work
Updated Fiddle : http://jsfiddle.net/QxygK/13/
In the body of my site, I am trying to create two columns - one on the far right with a fixed width (300px) for advertisements etc, and one on the left which will take up the remaining space on the page. How can this be accomplished in CSS?
CSS :
.column-right {
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.column-right .column-content {
margin-left: 250px;
}
.column-left {
float: left;
margin-left: -100%;
width: 250px;
height: 200px;
background-color: green;
}
HTML :
<div class="column-right">
<div class="column-content">
<strong>Right Column:</strong><em>Liquid</em>
</div>
</div>
<div class="column-left">
<strong>Left Column:</strong><em>250px</em>
</div>
Here is a tool to generate fixed liquid columns for placing adsense ads.
CSS:
#right-column{
width:300px;
float:right;
}
#other-column{
float:left;
width:100%;
padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}
In HTML:
<div id='right-column'>
<!-- ads here -->
</div>
<div id='other-column'>
<!-- content here -->
</div>
You might also want to check out the YUI: CSS Grid Builder. It is a simple web interface where you specify what grid layout you are looking for, and they will provide you the html code you can use in combination with the YUI Grids CSS framework to get your desired layout. One nice thing about the YUI Grids CSS framework is it has good cross browser support which saves you time getting it to work across different browsers. You can also reverse engineer the code that you are provided from the grid builder to get some ideas on how you can do it on your own. The settings you will want to use with the YUI: CSS Grid Builder to get your desired layout is as follows:
Body Size: 100%
Body Columns: Sidebar right 300px
One solution I've found for this is to float the right column to the right and give the left column an absolute position with left:0 and right:300px. This will make it fluid as if you gave it a width:80%, but it will be relative to the parent container in a different way.
Here's an example:
http://jsfiddle.net/tkane2000/dp9GZ/
One issue you might find with this is that since it's absolute, it won't naturally push down the elements below it.
Another possible solution would be to give the left column
width:100%
padding-right: 300px;
and the right (fixed width) column:
position: absolute:
top:0;
right:0;
You might need to set box-sizing:border-box on the left column.
This also as some limitations. One that comes to mind, is that if you wanted the left column to have a border-right to separate each, the border would be on the wrong side of the right column.