Can anyone advise on the best cross-browser/device method to style a button with curved edges that will stretch to the width of its parent element?
The button needs to use background images - I was considering the following code - The button needs to stretch to the width of th 90% outer div - btnContent div will stretch and leftCurve/rightCurve stay the same size width.
<div style="width:90%">
<div class="leftCurve"></div>
<div class="btnContent">button 1</div>
<div class="rightCurve"></div>
</div>
Try this method
<style>
.outerdiv{ width:100%;}
.rightcurve{ background:url(rightcurveimage.png) no-repeat 100% 0; height:20px; padding-right:10px;}
.leftcurve{ background:url(leftcurveimage.png) no-repeat 0 0; width:1%; height:20px; float:left; clear:right;}
.btncenter{ background:url(btncenterimage.png) repeat 0 0; height:20px; float:left; width:99%;}
</style>
<div style="width:100%">
<div class="rightcurve">
<div class="leftcurve"></div>
<div class=btncenter> Button 1</div>
</div>
</div>
Note: You have to put leftcurve, and btncenter div into rightcurve div
That's not actual code. In any case you will need to put the 90% on the btnContent not on the parent element.
Related
I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.
When a row exceeds the viewport width, it displays the scrollbar,
but when you scroll, the styling of the row element remains the size of the viewport,
it does not seem to "wrap" all of its children.
see : fiddle
Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.
A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...
Duplicate of fiddle code...
<body>
<div id='pg_wrap'>
<div id='frm0'>
<div class='sk_scrl'>
<div class='sk_row'>
<div class='itm_val'>row 1</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
<div class='sk_row'>
<div class='itm_val'>row 2</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
</div>
</div>
</div>
#frm0{ width:420px;height:200px}
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
display:flex;
justify-content:flex-start;
align-items:center;
background:#ff0;border:2px #f00 solid;
height:50px}
.itm_val{
display:flex;
border:1px #000 solid;background:#666;
flex:0 0 100px; height:30px; margin:0 5px;
align-items:center;justify-content:center}
Note : this is not the same as question
That op wants to change child behaviour, I want the parent to change.
It's not working the way you want because .sk_row inherits the width, in this case from #frm0:
#frm0 { width: 420px; }
With the class .sk_scrl you can't see it very well, because it's set to:
.sk_scrl { overflow: auto; }
If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.
Here's an example for how the width-inheriting-thing works:
<div class="container">
<div class="element"></div>
</div>
If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:
.element {
width: 200%;
}
If it were set to 100%, it would only be as wide as .container.
Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/
I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.
I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.
Can anyone help me out please?
You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...
here is HTML:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
Here is a demo: demo link
Try with display: inline-block and white-space: nowrap.
Demo
Example:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
LIve demo
Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.
If you make the centre div have a width of 10%, the gaps disappear.
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center
You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS
Here is a Live Demo.
Is it possible to have a fixed width div floated alongside a variable width div?
I would like to have a 80px image sit alongside a div that stretches to 100% of the remining width using dynamic content - the html would be a repeated version of below -
for example -
<div class="mediaImg">
<img src="#"/>
</div>
<div class="textArea">
blah blah blah
</div>
Thanks
Paul
you have to write like
#divleft
{
background-color:red;
width:80px;
height:80px;
float:left;
}
#divright
{
background-color:blue;
overflow:hidden;
height:80px;
}
In this example of you give padding & margin to #divright. there is not effect in the layout structure.
check this http://jsfiddle.net/sandeep/u2sQD/1/
Just apply float and an width on your fixed div:
div.fixed{
float: left;
width: 70px;
padding: 0 5px;
}
Live example: http://jsfiddle.net/nvgBm/
Yes. I would put them inside a container type div with position:absolute then the two div's having relative positioning with float left.
<div class='container' width='100%'>
<div class='imgDiv'>
<img src='...'></img>
</div>
<div class='content'>
...content goes here
</div>
</div>
Then the css...
.container{
position:absolute
width:100%
height:100%
}
.imgDiv{
position:relative
float:left
width:80px
}
.content{
position:relative
float:left
}
Here is my example:
<div id="mainContainer">
<div id="itemIWantToCenter"></div>
<div id="itemIwantFloatedRight"></div>
</div>
The mainContainerwidth width is set to 100%. The itemIwantFloatedRight width is set to 300px. Let's say that the itemIWantToCenter has a width of 200px. How would I center that div while floating the other within the container? Thanks!
Hope this helps:
<div id="mainContainer">
<div id="itemIWantToCenter" style="float: right;"></div>
<div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>
Here's a fiddle of my solution and the code is below (fixed link)
The advantages to this solution is that when the parent container's size changes, the content container will expand, while retaining it's margins and the right sidebar will always remain on the right.
Hope this helps.
Note In the fiddle, the content container is a little slim. This is due to the size of the window. Change the size of the window {hover over the dividers, click and drag}, to see the benefits.
<div class="container">
<div class="content">
centered content
</div>
<div class="right">
right
<div>
</div>
.container {
width:100%;
position:relative;
}
.container .content {
width:auto;
margin:0 200px;
background:green;
}
.container .right {
width:200px;
position:absolute;
top:0px;
right:0px;
background:#f00;
}
.content, .right {
height:300px
}
You should use a linked stylesheet ofcourse...
<div id="mainContainer" style="width:100%; border:solid 1px red;">
<div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
right
</div>
<div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
center
</div>
</div>
basically my html code looks like:
<div id="leftbar"></div>
<div id="content"></div>
<div id="rightbar"></div>
how do i code it with css so that the all 3 divs will be side by side and leftbar and rightbar have a fixed width while content will be flexible to fill out the webbrowser.
Try this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
How about this one: http://www.glish.com/css/7.asp
Float the leftbar left, and give content a margin-left value equal to (or greater than) the width of the leftbar. Float the rightbar right, and give content a margin-right value equal to (or greater than) the width of rightbar.
.nav1 { width:200px; float:left; }
.nav2 { width:200px; float:right; }
.content { margin:0 210px; }
.clear { clear:both; }
--
<div id="wrapper">
<div class="nav1">Main Nav Items</div>
<div class="nav2">Other Nav Items</div>
<div class="content">Content goes here</div>
<div class="clear"></div>
</div>
Now css has flexbox model.
You should read the specification to get the flexible layout of webpage
http://www.w3.org/TR/css3-flexbox/