I am working with an existing system, and am trying to modify the CSS in order to arrange the three columns correctly.
What css changes do I need to make in order to display the third column correctly?
View in this JSFiddle
CSS
.test .repeater {
border: none;
margin: 0;
}
.test .indent1 .wizard-parentcontrol .controlkl {
width: 33%;
float: left;
display: block;
}
.test .wizard-controls .indent1 .control:first-child {
margin-top: 17px;
}
.test .indent1 .wizard-parentcontrol .popupbrowser {
width: 30%;
float: left;
border: 1px solid red;
display: block;
}
HTML
<div class="test wizard-parentcontrol">
<div>
<div>
<fieldset></fieldset>
</div>
<div>
<div>
<fieldset>
<div>
<div class="repeater indent1">
<div class="wizard-parentcontrol">
<div>
<div>
<div class="controlkl">Column 1</div>
</div>
</div>
<div>
<div>
<fieldset>
<div id="p0t2c4dpopupbrowserControl" class="popupbrowser">Column 2</div>
</fieldset>
</div>
<div>
<div class="">
<p class="ctrlinvalidmessage"></p>
<fieldset>
<div id="p0t2c5dpopupbrowserControl" class="popupbrowser">Column 3</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
Check If you can do the following changes.
I just added class
.wizard-parentcontrol div
{
float:left;
}
and removed the hardcoded width's of 33% and 30% from your code.
Check the demo
Related
Does anybody knows how to group two cells of two rows in a table, using CSS display property value table-row-group?
I know that in CSS rowspan doesn't exist but table-row-group is defined to be equivalent to tbody as I can read in this http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group.
In the following code, I used some divs to create a table using table as CSS display property value. Then in this brand new table, I want to group together the divs having the role of cells, with id row2_cell2 and row3_cell2. I have tried to do it, but, without success, using the value table-row-group of the CSS property display:
<div id='table'>
<div class='row'>
<div class='cell'>
</div>
<div class='cell'>
</div>
</div>
<div class='row_group'>
<div id='row_2' class='row'>
<div class='cell'>
</div>
<div id='row2_cell2' class='cell'>
</div>
</div>
<div id='row_footer' class='row'>
<div class='cell'>
</div>
<div id='row3_cell2' class='cell'>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/framj00/2eN3U/
Can you help me please to resolve this problem? many thanks!
table-row-group works only with table element in HTML.So instead of divs use table.You can follow the Fiddle
<html>
<head>
<style>
.black {
border-style: solid;
border-width: 1px;
border-collapse: collapse;
padding: 3px;
}
.tbl { display: table; }
.row { display: table-row; }
.cel { display: table-cell; }
.cpt {
display: table-caption;
text-align: center;
}
.thc {
display: table-cell;
background-color:#f2e8da;
text-align: center;
font-weight: bold;
}
.row:nth-child(odd) { background-color: #def; }
.row:nth-child(even) { background-color: #fff; }
.row:hover {background-color:#f2e8da; }
.tbody { display: table-row-group }
.thead { display: table-header-group }
input {
width: 100%;
background-color: inherit;
}
</style>
</head>
<body>
<div class="tbl black">
<div class="cpt"><input type="search" placeholder="search me"/></div>
<div class="thead">
<div class="row black">
<div class="thc black">name</div>
<div class="thc black">form</div>
</div>
</div>
<div class="tbody" id="data">
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="1"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="2"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="3"/></div>
</form>
</div>
</div>
</body>
</html>
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.
I dont understand why I have a large gap between the second picture and the text to its right. I've attached a fiddle for the code. How do I close this gap?
http://jsfiddle.net/7Qchr/
.main {
-webkit-column-gap: 1em;
-webkit-column-rule: 2px;
-webkit-columns: 2;
}
#image {
max-width: 100%;
}
<div class="main">
<p id="text_l">
“ The best selection of cheese I've ever seen! Cannot wait for our next order!”
<p>
<img src="img/cheese1.jpg" alt="Picture of cheese" id="image">
</div>
<div class="main">
<img src="img/cheese2.jpg" alt="Picture of cheese" id="image">
<p id="text_r">
“ Wow,amazing cheese selection and fast delivery! I highly recommed you try!”
<p>
</div>
You'll have to rewrite your code a bit... Try something like this:
HTML
<div class="main">
<div>
<p id="text_l">blah</p>
</div>
<div>
<img src="cheese1.jpg" class="image">
</div>
</div>
<div class="main">
<div>
<img src="cheese2.jpg" class="image odd">
</div>
<div>
<p id="text_r">blah</p>
</div>
</div>
CSS
.main div{
width: 48%;
display: inline-block;
vertical-align: top;
}
.image {
max-width: 100%;
padding: 0 10px;
}
.image.odd {float: right;}
http://jsfiddle.net/7Qchr/6/
Updated Demo
The following CSS was added (none of the existing HTML or CSS was changed).
.main + .main {
text-align: right;
}
p {
text-align: left;
}
I have a strange problem.One of my div's width is not working. My CSS is like
.product_info
{
margin-top:10px;
background:#444;
width:850px;
}
.product_image
{
width:350px;
text-align:center;
float:left;
padding:8px;
border:1px solid #e9e9e9;
background:#fff;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
}
And My HTML file is
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
</div>
But as you can see in the attached image my div product_info's width is not 850px, Whats wrong
display: flex on the parent element also changes how width and height work. Disable shrinking/growing by flex: 0 0 auto;, or use min-width and max-width instead.
Width and height basically lose the original meaning in this context and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis
.box {
margin: 2px;
border: 1px solid black;
padding: 3px;
}
.box.gray {
background: lightgray;
}
.box.container {
display: flex;
flex-flow: row;
}
<div class="box" style="
width: 300px;
font-size: 80%;
">
<div>
width: 300px;
</div>
<div class="box container">
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
<div class="box container">
<div class="box gray" style="
width: 200px;
flex: 0 0 auto;
">
width: 200px;<br>
flex: 0 0 auto;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
</div>
Try
display:block
It should work
display: inline-block; Worked for me
Example:
label {
min-width: 90px;
display: inline-block;
}
i hope you are looking like this :- http://tinkerbin.com/MU2CUpre
Actually you have used floating in your child div's and didnt clear your parent div.
So i have cleared your parent div through overflow:hidden; in parent div and cleared this child div .product_details also its working fine......
CSS
.product_info
{
margin-top:10px;
background:#444;
width:850px;
overflow:hidden;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
clear:both;
}
Use the clear: both; property.
.product_info {clear: both;}
Hi now define your class .product_into overflow:hidden;
Live demo
as like this
.product_info{
overflow:hidden;
}
=======
or option 2
define one css
Css
.clr{
clear:both;
}
Put the this div in last line closing the .product_info class
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
<div class="clr"></div>
</div>
Live demo option two
So I've been using CSS table display property to get a table layout on my site. Now before you go into the using 'float' property or use the HTML table tag, I prefer the CSS table layout and find it better and my mind is made up. Here is the HTML code:
<div class="page_wrap">
<div class="header">
<div class="banner">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Topics</li>
<li>"Closet"</li>
<li>Music</li>
<li>Resources</li>
<li>About</li>
</ul>
</div>
<div class="directory"></div>
</div>
<div class="content">
<div class="main_col">
<div class="blog">
<div class="blog_head">
<h3>What To Wear Today</h3>
</div>
<div class="blog_body">
<p></p>
</div>
<div class="blog_recent"></div>
</div>
<div class="news">
<div class="news_recent"></div>
</div>
</div>
<div class="sub_col">
<div class="daily_verse">
<h3>"What Word To Wear Today"</h3>
<p></p>
</div>
<div class="bible_topic"></div>
</div>
</div>
<div class="footer">
<div class="container"></div>
</div>
</div>
And here is the CSS:
.content
{
display: table-column-group;
margin-top: 25px;
}
.main_col
{
display: table-column;
background: red;
width: 550px;
padding: 20px 15px;
}
.sub_col
{
display: table-cell;
background: green;
width: 350px;
padding: 20px 15px;
}
.blog
{
display: table-cell;
background: black;
}
.blog h3
{
padding: 20px 0px;
width: 250px;
}
.news
{
display: table-cell;
background: gray;
}
.daily_verse
{
display: table-cell;
}
.bible_topic
{
display: table-cell;
}
</style>
The problem is when I use the table-column property in the CSS, then everything in the HTML tag under the main_col div disappears.
Use this example as your structure and go from there. Your table is crazy disorganized and I don't think you are actually wanting table-columns. Or maybe an illustration of how you'd like it to look would help and we could provide code examples?
(http://xahlee.info/js/css_table.html)