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 />
...
Related
<div style="float: left;">
<img src="image.png"/>
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
When I run this code, the words appear underneath the picture, is there any way to make the words appear to the right of the text?
I am not sure why your container div has float: left; in its styles, but you can use Flexbox to arrange the contents with more flexibility.
Here's a simple example:
<div style="float: left; display: flex;">
<img src="https://picsum.photos/seed/picsum/200/300" />
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
Isn't it simple? Just put <img> after the words...
<div style="float: left;">
<div style="font-size: 100px;">
Health And Wellbeing
</div>
<img src="image.png" />
</div>
I've got these posts which are images and output I'd like to stack in a column, but the divs are stuck on top of each other. I'd like to have them stacked with a bit of margin between them. How do you stack images with aligned output?
<hr />
<div id="listingwrapper">
<div style="float:left;">
<img src="gateway/imgs/stock/profilechick.jpg" />
</div>
<div style="float:left; width: 246px;">
<span style="color:white;"><b>Wicked awesome chick goes to the</b></span><br/>
</div><br/>
<div>
<span style="color:white;"><i>600 views</i></span>
</div>
</div>
<div id="listingwrapper" style="clear:both;">
<div style="float:left;">
<img src="gateway/imgs/stock/profilechick.jpg" />
</div>
<div style="float:left; width: 246px;">
<span style="color:white;"><b>Wicked awesome chick goes to the</b></span><br/>
</div><br/>
<div>
<span style="color:white;"><i>600 views</i></span>
</div>
</div>
try this demo here
#listingwrapper {
clear: both;
margin-top: 35px;
overflow: hidden;
}
I have this html:
<div id='calendarControlPane'>
<div id='calendarControl'>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
</div>
</div>
I'm using "display:inline-block" on container divs because I want those divs to fit the size of their contents.
The problem I have is that they are drawn next to each other and need to be drawn below each other.
Well, depending upon your actual final application, using a float can work (see fiddle), though older versions of IE can choke on it:
HTML
<div id="calendarControlPane">
<div id="calendarControl">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>
CSS
#calendarControl > div {
float: left;
clear: left;
border: 1px solid black;
}
#calendarControl > div > div {
width: 14px;
height: 15px;
}
Oldschool fix:
<div id='calendarControlPane'">
<div id='calendarControl'">
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div>
</div>
</div>
Simply add a
<br />
after each div containing the inline-block class.
You're not really asking a question here, and the two bottom lines of your post are a bit hard to understand, but are you sure you don't want display: block instead?
edit: As drublic said, this is the default display value for divs, so you shouldn't need that style at all.
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>
attached is an image.
I am trying to get the text format as shown at the right-most end. i.e. within the height of the thumbnail (36px) name, time, date have to be shown vertically aligned. I am having problem showing the text vertically aligned. Here's my code -
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div id='name' style="float:right; font-size:11px">Peter</div>
<div id='time' style="float:right;font-size:11px;">19:23</div>
<div id='date' style="float:right;font-size:11px;">23 Dec'10</div>
</div>
</div>
To be accurate, I want the div ids 'name', 'time', 'date' to be aligned like in the image. how?
Also note that the div with id="0" is one of the results, there'll be 10 such in a page all under <div id="sresults">
Here's what you want: http://www.bravegnuworld.com/rjune/test.html
Notice encapsulating the name, etc in a div that is floated right? You have three divs(block elements, they'll automatically stack). Put those inside another div, and you now have a block element with three stacked blocks inside it. You can either use "float:right" or "display:inline-block" to make the div display on the same level. as the rest of the line.
<div id="sresults" style="position:absolute;top:120px; left:36%; background:yellow">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both; background:red">
<div id="content0" style="float:left; font-size:13px; background:blue">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right; background:green">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div style="float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
You can use table instead of div it's seems more logical to me:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<table id="meta0" style="float:right;">
<tr>
<td>
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"/>
</td>
<td style="text-align:right;">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</td>
</tr>
</table>
</div>
</div>
UPD
Here is code with divs:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="id0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts' style="float: left;"/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter" style="float: left;"/>
<div style="text-align:right; float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
</div>