First of all I'm not an expert in CSS so my code might be a bit naive... As i'm prototyping, things are just high level concept so please be nice
I'm trying to create vertical and horizontal layouts in CSS. My aim is to create custom layouts with GWT. My target browser is for now IE 7, but I'd love to find a cross-browser solution.
For the horizontal layout it works, and for the vertical as well. However, things get tougher with I try to mix them.
An vertical layout with an horizontal layout works quite good. But when I try to add a vertical layout in a horizontal one it does work. Actually the vertical layout has a line return on both right and left sides. I've tried with span and div, and it doesn't work.
What i'm expecting is this:
[HElement1][HElement2][VElement1][HElement3][HElement4]
-------------------------------[VElement2]-----------------------------
-------------------------------[VElement3]-----------------------------
(fig. 1)
However what i get is:
[HElement1][HElement2]
[VElement1]
[VElement2]
[VElement3]
[HElement3][HElement4]
My assumption is that, somehow, I need to use the space marked with "-" in fig. 1. And I can not get ride of the line return because as long as the space is not used, the browser will add itself the line return.
To get things a bit more tougher, i'm trying not to set any dimension like width and height of my layout. I just want the style sheet to re-size automatically the layout so that it fits with the content... (yeah i believe in god...
)Please, find enclosed the code.
I would really appreciate if any of you could have a clue or could share his knowledge and experience in CSS.
Thanks for your time and for reading.
CODE
.HLayout{
display:inline;
white-space:nowrap;
border-width: 1px;
border-style:solid;
border-color:red;
}
.VLayout{
display:block;
border-width: 1px;
border-style:solid;
border-color:green;
}
display:inline;
white-space:nowrap;
border-width: 1px;
border-style:solid;
border-color:red;
}
.VLayout{
display:block;
border-width: 1px;
border-style:solid;
border-color:green;
}
CODE
<html>
<head>
<LINK href="Layouts.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Tested: Align elements horizontally -->
<b> HLayout </b><br>
<div class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
<div>
<!-- Tested: Align elements vertically -->
<b> VLayout </b><br>
<div class="VLayout">
<div><input type="text"/></div>
<div><input type="text"/></div>
<div><input type="text"/></div>
</div>
<!-- Tested: A VLayout with a HLayout -->
<b> VLayout + HLayout </b><br>
<div class="VLayout">
<span class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
</span>
<div><input type="text"/></div>
<div><input type="text"/></div>
<!-- you must change the type from div to span -->
<span class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
</span>
<div><input type="text"/></div>
<div><input type="text"/></div>
<span class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
</span>
<div><input type="text"/></div>
<div><input type="text"/></div>
</div>
<!-- This on doesn't work -->
<b> HLyout + VLayout </b> <br>
<div class="HLayout">
<span><input type="text" value="HText1"></span>
<span><input type="text" value="HText2"/></span>
</div>
<span class="VLayout"><span class="VLayout">
<div><input type="text"/></div>
<div><input type="text"/></div>
<div><input type="text"/></div>
</span>
<div class="HLayout">
<span><input type="text" value="HText3"/></span>
<span><input type="text" value="HText4"/></span>
</div>
</body>
</html>
<head>
<LINK href="Layouts.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Tested: Align elements horizontally -->
<b> HLayout </b><br>
<div class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
<div>
<!-- Tested: Align elements vertically -->
<b> VLayout </b><br>
<div class="VLayout">
<div><input type="text"/></div>
<div><input type="text"/></div>
<div><input type="text"/></div>
</div>
<!-- Tested: A VLayout with a HLayout -->
<b> VLayout + HLayout </b><br>
<div class="VLayout">
<span class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
</span>
<div><input type="text"/></div>
<div><input type="text"/></div>
<!-- you must change the type from div to span -->
<span class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
</span>
<div><input type="text"/></div>
<div><input type="text"/></div>
<span class="HLayout">
<span><input type="text"/></span>
<span><input type="text"/></span>
<span><input type="text"/></span>
</span>
<div><input type="text"/></div>
<div><input type="text"/></div>
</div>
<!-- This on doesn't work -->
<b> HLyout + VLayout </b> <br>
<div class="HLayout">
<span><input type="text" value="HText1"></span>
<span><input type="text" value="HText2"/></span>
</div>
<span class="VLayout"><span class="VLayout">
<div><input type="text"/></div>
<div><input type="text"/></div>
<div><input type="text"/></div>
</span>
<div class="HLayout">
<span><input type="text" value="HText3"/></span>
<span><input type="text" value="HText4"/></span>
</div>
</body>
</html>
Answers