I have the following HTML:
<fieldset>
<legend>Details</legend>
<div class="form-section first">
<div class="abc">
<div class="editor-label">
<label for .../>
</div>
<div class="editor-field">
<input type="text" ... />
</div>
</div>
<div class="def">
...
</div>
<div class="ghi">
...
</div>
</div>
<div class="form-section">
</div>
<div class="form-section last">
</div>
</fieldset>
I have a fieldset that is wrapping all of my form elements. The fieldset contains multiple form sections, which basically hold one "row" of content. The divs in the form sections I want to float to the left:
||||||| ||||||| ||||||| <-- first form section, 3 floated elements
||||||| ||||||||||| <-- second form section, 2 floated elements
What is the proper way to float these elements so that:
1) The second form section occurs on its own line.
2) The second form section can apply a top margin.
I can't seem to get it right. I need the solution to work in IE7. I tried putting a clear: both on the form-section element but it didn't seem to work right. All 5 elements occurred on the same line instead of 2 separate lines.
** EDIT **
I can somewhat get this to work. My issue is the following:
When I float the elements within a container, they essentially have 0 height. This messes up any containers that come after it if they want to apply a top margin.
for the row of three try:
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: right;"></div>
</div>
<div style="clear:both; width:100%; height:10px;"></div>
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
That should get you the desired output.
<fieldset>
<legend>Details</legend>
<div id="section 1">
<span style="height: 500px;">1</span>
<span style="height: 500px;">2</span>
<span style="height: 500px;">3</span>
</div>
<div id="section 2" style="margin-top: 50px;">
<span>4</span>
<span>5</span>
</div>
</fieldset>
Related
I have a wrapper wrapping around 3 divs that are inline-block and all three divs are 128px high. There is no padding nor margin anywhere. The first div contains an image and ends up not the same height as the other two (lower by 3.3px).
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
The code is written in JSX.
I've tried setting the wrapper to 128px, but the <img> is still sticking out the bottom
Why does the <img> act like that?
Add verticalAlign:top to each of the three <div>'s style attributes. This align's inline-block elements along their top edges.
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{verticalAlign:"top",display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
See My inline-block elements are not lining up properly for additional information.
I created a simple floating pane declaratively(the below code) . everything is good. I have a button that click on it and the floating pane will open. the problem is that if i again click the button, the floating pane position is change from the previous position . How can i set position of the floating pane. another problem is the top,left and position:absolute is not working for my floating pane .
<body class="claro" role="main">
<div id="bc" style="width:100%; height:100%; padding: 5px;" dojoType="dijit.layout.BorderContainer">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="true">
</div>
<div dojoType="dojox.layout.ExpandoPane"
splitter="true"
duration="125"
region="left"
previewOnDblClick="true"
id="leftPane"
maxWidth="275"
style="width: 275px;">
<div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="Legend">
<div id="legendDiv"></div>
</div>
<div dojoType="dijit.layout.AccordionContainer" title="Search" style="width:275px;" attachParent="true">
<div dojoType="dijit.layout.ContentPane" title="Attribute search">
<div class="searchBar">
<p>
<label for="searchBox" style="float: left;">Search:</label>
<input id="searchBox" name="searchBox" style="float: left;">
<span id="runSearchIcon" style="border: none; floast: left; padding: 3px;">
</span>
</p>
</div>
<ul id="dojoList"></ul>
</div>
<div dojoType="dijit.layout.ContentPane" title="spatial search">
<ul id="dijitList"></ul>
</div>
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="center" id="centerPane" tabStrip="true">
<div id="mymap" style="width:100%;height:100%"> </div>
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute;top: 100px;;left:0;width:70px;height:150px;visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
</div>
</div>
</body>
Easiest way would be to set the position:absolut with every click on the Button to the first position by using domStyle.
domStyle.set("dFloatingPane",{
position:"absolute",
top:"100px",
left:"0px"
});
Simple solution just create a div and set position relative , position relative control absolute, here is the sample code eg. check and understand
<div style="position:relative">
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute; top: 100px; left:0; width:70px;height:150px; visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
Position:relative Control position:absolute , so you can set your top or bottom position accordign to your dessign thanku, hope you understand my point.
The following is my HTML:
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
My css is the following (along with bootstrap):
.profile-picture
{
max-width: 200px;
max-height: 200px;
}
.center
{
margin: 0 auto;
float: none;
}
This produces the following output:
The way I want it to display is as shown below:
How can I achieve this? Shouldn't they get displayed on the SAME line seeing as they are part of the same row? Each has a length of 6 so why don't they horizontally align?
The problem is you're removing the necessary float on the columns (by setting float:none to .center). Remove that .center class altogether, it's not needed. You are also missing row divs...
Note, I added a row around the the h2 tag as well. For ease-of-use and proper formatting, that tag needs to be wrapped as well. Helps keep the formatting in check. ;)
Also, you shouldn't have two <h3> tags one after another like that. Use <p> instead of the second h3 - or better yet, just use one <h3> tag and use <br /> to break the one h3 into two lines (see below).
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
</div>
<div class="row">
<div class="col-md-6">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6">
<h3>Profile name: N/A <br />
Status: Waiting for user input</h3>
</div>
</div>
</div>
Never apply any styles or classes to elements with grid classes, if you're not really know what you are doing. Use a nested div instead if you need to change something:
<div class=container">
<h2 class="text-center">Enter your name below</h2>
<div class ="row">
<div class="col-md-6">
<div class ="center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
</div>
<div class="col-md-6">
<div class ="center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
</div>
With Bootstrap, you have to include a div with an class of row, so something like this:
<div class="row">
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
See Bootstrap's documentation on their grid system.
It seems it'd work. I don't know why... My description is too far over.
HTML
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:right"> <strong>Description:</strong></div>
<br />
now I understand.
Try to do this:
<div id="viewPhoto">
<div id="viewThumb" style="float: left">
<img src="http://images.br.sftcdn.net/br/scrn/73000/73753/santos-5.jpg" />
</div>
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
<div class="moderPanel" style="float:left; border:1px solid green; clear: left">
$MODER_PANEL$
</div>
Because you are putting the div in a float right way.
Try do to left using margin left. Like this:
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
It's because your float:right CSS statement is causing ithe description to float to the right of your container element. Try using float:left together with a small margin like this:
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:left; margin-left:15px;"> <strong>Description:</strong></div>
<br />
...
I'm trying to create two floating divs inside of another:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="height:30px;text-align:center;position:relative; "><h2>welcome</h2></div>
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
</div>
</div>
</div>
The problem is the floating div1 and div2 are outside the border of the div with id "borderdiv". What am I doing incorrectly?
Floated elements have no height, so #borderdiv does not expand to contain them.
You can use a clearing element to correct this:
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="clear: both" />
Demo on JSFiddle.net
Since your question was not very specific, then my answer is very simple. This simply puts the div1 and div2 inside the borderdiv:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="height:30px;text-align:center;position:relative;"><h2>welcome</h2></div>
</div>
</div>
</div>