CODEWITHSUNDEEP
htmlcssforms
DeMarco
DeMarco

Reputation: 599

CSS layout table with margin

I want to make a layout like this:

enter image description here

However, what I am getting with this MCVE below is:

enter image description here

CODE:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> MCVE     </TITLE>
<STYLE>
body {
    font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
    background: #FDFDFD;
}

h1 {
    font-size: 60px;
    text-align: center;
    margin: 40px;
    color: #000;
}

.wrap {
    width:60%;
    margin:0 auto;
}
.header {
border: 1px double;
text-align:center;
}
.row {
    align: center;
width:inherit;
background:#bbb;
min-height:200px
display:table;

}
.right-inner {
display:table-cell;
float:right;
width:50%;
background:#fff;
border-bottom:thick #06C;


}
.left-inner {
display:table-cell;
float:left;
width:50%;
background:#fff;
}


body {
background: #ccc; /* Old browsers */
}

</STYLE>
</HEAD>
<BODY>
<H1> MCVE </H1>
<!--FUNCTIONCALL DisplayLameCounter -->
<FORM ACTION="form.htm" METHOD=POST NAME="testform">
    <div class="wrap">
        <div class="header"><h2>HEADER</h2></div>
        <div class="row">
            <div class="left-inner">
                <p><b>field1</b></p>
                <input name="field1"  type="range" min="1" max="5" step="1" /> 
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
            <div class="right-inner">
                <p><b>field2</b></p>
                <input name="field1" type="range" min="5" max="10" step="1" /> 
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
        </div>
        <div class="row">
            <div class="right-inner">
                <p><b>field3</b></p>
                <input name="field3" type="range" min="1" max="10" step="1" /> 
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
            <div class="left-inner">
                <p><b>Direction:</b></p>
                <input type="radio" name="radio" value="1" checked>1<br>
                <input type="radio" name="radio" value="2">2<br>
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
        </div>
    </div>
</FORM>
</BODY>
</HTML>

My biggest problem is to create this margin between elements and make them have this "table" look. And as this is for layout, I feel like using an actual <table> would be inappropriate.

Important aspect of this page: all those elements are inside a form, but I don't think this should matter for the design.

Upvotes: 0

Views: 40

Answers (3)

GabrielSNM
GabrielSNM

Reputation: 371

Add this to the "row" class (.row)

display: table;
width: 100%;

and eliminate the "float" in "left-inner" and "right-inner" classes

(Care missing a semicolon after "min -height: 200px" in class ".row")

Maybe that's why he was not taking the display table

Upvotes: 1

Joshua Whitley
Joshua Whitley

Reputation: 1186

There are actually a few things that need to be straightened out here:

  1. .wrap needs to have display: table rather than .row.
  2. .row should have display: table-row rather than display: table.
  3. .left-inner and .right-inner do not need float.
  4. .row needs width: 100%.
  5. align should be text-align.
  6. border: thick #06C should be border: <no of pixels>px solid #06C.

These things should give you the effect you're looking for.

Upvotes: 2

sanoj lawrence
sanoj lawrence

Reputation: 993

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> MCVE     </TITLE>
<STYLE>
body {
    font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
    background: #FDFDFD;
}

h1 {
    font-size: 60px;
    text-align: center;
    margin: 40px;
    color: #000;
}

.wrap {
    width:60%;
    margin:0 auto;
}
.header {
border: 1px double;
text-align:center;
}
.row {
    display: table;
width: 100%;
    align: center;
width:inherit;
background:#bbb;
min-height:200px;
display:table;

}
.right-inner {
    
display:table-cell;
float:right;
width:50%;
background:#fff;
border-bottom:thick #06C;


}
.left-inner {
    
display:table-cell;
float:left;
width:50%;
background:#fff;
}


body {
background: #ccc; /* Old browsers */
}

</STYLE>
</HEAD>
<BODY>
<H1> MCVE </H1>
<!--FUNCTIONCALL DisplayLameCounter -->
<FORM ACTION="form.htm" METHOD=POST NAME="testform">
    <div class="wrap">
        <div class="header"><h2>HEADER</h2></div>
        <div class="row">
            <div class="left-inner">
                <p><b>field1</b></p>
                <input name="field1"  type="range" min="1" max="5" step="1" /> 
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
            <div class="right-inner">
                <p><b>field2</b></p>
                <input name="field1" type="range" min="5" max="10" step="1" /> 
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
        </div>
        <div class="row">
            <div class="right-inner">
                <p><b>field3</b></p>
                <input name="field3" type="range" min="1" max="10" step="1" /> 
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
            <div class="left-inner">
                <p><b>Direction:</b></p>
                <input type="radio" name="radio" value="1" checked>1<br>
                <input type="radio" name="radio" value="2">2<br>
                <img src="http://www.goodhousekeeping.com/cm/goodhousekeeping/images/caramelized-apple-crostata-1224-200.jpg">
            </div>
        </div>
    </div>
</FORM>
</BODY>
</HTML>

Upvotes: 0

Related Questions