8 Replies - 388 Views - Last Post: 18 April 2019 - 04:54 AM

#1 bpinonto   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 12
  • Joined: 17-April 19

Div problem

Posted 17 April 2019 - 10:29 AM

Hi, I use the code below in
www.fmipa-unsrat.com/test.php
The images should be in one line. But why is it not the case here? Please help.

---------------
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Pimpinan FMIPA UNSRAT</title>
<style>
.box33 { background-color:#D9FFFF; float:left; width:33%; padding:20px; text-align:center; font-size:small; color:black
}.box34 { background-color:#D9FFFF; float:left; width:34%; padding:20px; text-align:center; font-size:small; color:black
}
@media only screen and (max-width:620px) { /* For mobile phones:*/ .box,.box33,.box34 { width:100%; }}




</style></head><body style="font-family:Verdana;color:#FFFFFF; background-color: #FFFFFF;">

<div style="background-color:#82D7FF;color: #666666; font-size:26px; text-align:center; padding:20px">	<strong>Pimpinan FMIPA</strong></div> <div style="background-color:#D9FFFF; font-size:small"> <div class="box33">		 		 		 <img alt="" height="250" src="wd1.jpg"><br>Wakil Dekan <br>Bidang Akademik dan Kerjasama<br>Ir. Fecky Recky Mantiri, 		 M.Sc., Ph.D. </div>		 <div class="box34">	 <img alt="" height="250" src="wd2x.jpg"><br>Wakil Dekan <br>Bidang Umum dan Keuangan<br>Dr. Gerald H. Tamuntuan, S.Si, M.Si. </div>		 <div class="box33">	 		 <img alt="" height="250" src="wd3x.jpg"><br>Wakil Dekan <br> Bidang 		 Kemahasiswaan dan Alumni<br>Dra. Meiske Sientje Sangi, M.Si. </div>.</div>
</body></html>
:code:

This post has been edited by modi123_1: 17 April 2019 - 10:54 AM
Reason for edit:: In the future, please use the [code] tag button in the editor.


Is This A Good Question/Topic? 0
  • +

Replies To: Div problem

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14995
  • View blog
  • Posts: 59,870
  • Joined: 12-June 08

Re: Div problem

Posted 17 April 2019 - 10:55 AM

Hit F12 on your browser and inspect the elements. If I fiddle with your width (or remove it completely) it works on one line.
Was This Post Helpful? 0
  • +
  • -

#3 bpinonto   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 12
  • Joined: 17-April 19

Re: Div problem

Posted 17 April 2019 - 11:27 AM

You mean the problem is on my browser?
I open it in different computers and use Chrome, Samsung Internet, and Internet explorer, the result is still the same. They are in two lines.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14995
  • View blog
  • Posts: 59,870
  • Joined: 12-June 08

Re: Div problem

Posted 17 April 2019 - 11:31 AM

No the problem is in your width percentage in your DIV style.

I was highlighting how using the F12, developer tools, was showed this.
Was This Post Helpful? 0
  • +
  • -

#5 bpinonto   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 12
  • Joined: 17-April 19

Re: Div problem

Posted 17 April 2019 - 11:36 AM

I use the same code with same width percentages in
http://fmipa-unsrat.com/pimpinan.php
and get the pics in one line. I am confusef.
Was This Post Helpful? 0
  • +
  • -

#6 bpinonto   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 12
  • Joined: 17-April 19

Re: Div problem

Posted 17 April 2019 - 04:31 PM

I have removed the width, and the result is here
www.fmipa-unsrat.com/test2.php
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • quantum multiprover
  • member icon

Reputation: 6792
  • View blog
  • Posts: 28,050
  • Joined: 12-December 12

Re: Div problem

Posted 17 April 2019 - 11:54 PM

Div's are block level elements - they, by default, occupy the full width available to them. You are also using br's after the images to force content onto a new line. You are fighting against CSS.

There are many ways to achieve this, and many tutorials to be found. You could make the div's display: inline (or use spans), or inline-block. You could float them. Your original attempt probably failed because of the additional padding added. It is also not a good idea to use values that add up precisely to 100%, different browser's aren't that accurate.

There are also flexboxes, tables, and other approaches.



Avoid the use of br tags for layout, use CSS.

Prefer stylesheets over inline styles.

I don't know how you are studying HTML/CSS but I'd recommend getting hold of a good book or two and working through them.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • quantum multiprover
  • member icon

Reputation: 6792
  • View blog
  • Posts: 28,050
  • Joined: 12-December 12

Re: Div problem

Posted 18 April 2019 - 12:43 AM

Topic moved to HTML & CSS (it is not about PHP).
Was This Post Helpful? 0
  • +
  • -

#9 DarenR   User is offline

  • D.I.C Lover

Reputation: 602
  • View blog
  • Posts: 3,993
  • Joined: 12-January 10

Re: Div problem

Posted 18 April 2019 - 04:54 AM

did you try style: inline-block? also only set widths if you have too

This post has been edited by DarenR: 18 April 2019 - 04:54 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1