PDA

View Full Version : How to show div in another div



A.hayee
May 16th, 2017, 10:01 AM
HI
I have written some code to display mobile phones in a container. But its not happening. The image is shown below
17056
what i want is to place the mobile div in the main div (having a heading Latest Mobiles). but it is outside that container

my code is


<!DOCTYPE html>
<html>
<head>
<title>Mobile Corner</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/w3css/4/w3.css">

<style>

body{background-color: lightgrey;}

.mheading{background-color: orange;width: 100%;}
.mheading h4{margin: 0px 0px 0px 16px; color: white; font-weight: bold; text-shadow: 1px 1px black;}

.section{margin-top: 10px; border: 2px solid orange; background-color: white;}

.mobileBoxMain{float: left; background: white; margin: 6px; padding: 5px; cursor: pointer; text-align: center; border: 1px solid black;}
.mobileBoxMain .price{background:#ffa64d; color:#428bca;}
.mobileBox{width: 130px; height: 140px; padding: 5px; line-height: 15px; vertical-align: middle;}
.mobileBox img{width: 75px; height: 100px; max-width: 75px; margin-bottom: 2px; }
.mobileBox:hover{background: #fff2e6; transition: 0.3s;}

</style>
</head>

<body>

<div class="section">
<div class="mheading">
<h4>Latest Mobiles</h4>
</div>

<div class="mobileBoxMain">
<div class="mobileBox">
<a href="#">
<img src="https://www.whatmobile.com.pk/admin/images/Samsung/GalaxyS8Pluss.jpg" >
<br />Samsung Galaxy S8 Plus
</a>
</div>

<div class="price">XXXXXXXXXXXXXX</div>
</div>

<div>
Testing Border
</div>
</div>
</body>
</html>


what should i do to get the correct result?

sunfighter
May 17th, 2017, 04:04 PM
According to you, your main div is <div class="mheading">
You moblie div with the image is <div class="mobileBox">

<div class="mobileBox"> in in a div named <div class="mobileBoxMain">. So we must eliminate that div first then move the close tag for the main to enclose the image div.
We then get this:


<body>
<div class="mheading">
<h4>Latest Mobiles</h4>
<div class="mobileBox">
<a href="#">
<img src="https://www.whatmobile.com.pk/admin/images/Samsung/GalaxyS8Pluss.jpg" >
<br />Samsung Galaxy S8 Plus
</a>
</div>
<div class="price">XXXXXXXXXXXXXX</div>
</div>
</body>
</html>

A.hayee
May 18th, 2017, 12:07 PM
Not exactly like that sunfighter
class=section is the main class for both classes (class=mheading & class=mobileBox).

jmrker
May 18th, 2017, 05:29 PM
Instead of showing what the display looks like with your existing code
(which we can see by running the code)
can you provide an example of the display you wish to create?

coothead
May 18th, 2017, 07:41 PM
Hi there A.hayee.


does this help...



<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Mobile Corner</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body{
margin: 0;
background-color: #d3d3d3;
font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}
.section{
margin-top: 0.625em;
border: 0.125em solid #ffa500;
background-color: #fff;
overflow: hidden;
}
.section h1{
background-color: #ffa500;;
margin: 0;
font-size: 1.3em;
line-height:1.62em;
text-indent: 1em; color: #fff;
text-shadow: 0.062em 0.062em 0.062em #000;
}
.section h1+div{
border-bottom: 0.125em solid #ffa500;
line-height: 2.5em;
text-align: center;
}
.mobileBoxMain {
float: left;
width: 8.125em;
background: #fff;
padding: 0.635em;
margin: 0.375em;
border: 0.0625em solid #000;
text-align: center;
cursor: pointer;
}
.mobileBoxMain a {
display: block;
padding: 0.25em 0;
font-size:0.9em;
color: #000;
}
.mobileBoxMain img {
display: block;
margin: 0 auto 0.5em;
}
.mobileBoxMain div{
background: #ffa64d;
color: #132c42;
}
.mobileBoxMain a:hover {
background: #fff2e6;
transition: 0.3s ease-in-out;
}
</style>

</head>
<body>
<div class="section">
<h1>Latest Mobiles</h1>

<div>
Testing Border
</div>

<div class="mobileBoxMain">
<a href="#">
<img src="https://www.whatmobile.com.pk/admin/images/Samsung/GalaxyS8Pluss.jpg" width="75" height="100" alt="">
Samsung Galaxy S8 Plus
</a>
<div>xxx xxx xxx</div>
</div>

<!-- .section --></div>

</body>
</html>



coothead

A.hayee
May 19th, 2017, 08:01 AM
Hi guys
Thanks all of you
I have some thing like that and i got the result which i required

in the .section class i have added "postion:relative;overflow: hidden;" and in .mobileBoxMain "position: relative;"

the result is looks like
17082

jmrker
May 19th, 2017, 04:38 PM
It would be a more responsive layout if you just duplicate the section parts,
without out the CSS position statements.
Note what happens when you reduce the width of your window.



<div class="mobileBoxMain">

<a href="#">
<img src="https://www.whatmobile.com.pk/admin/images/Samsung/GalaxyS8Pluss.jpg" width="75" height="100" alt="">
Samsung Galaxy S8 Plus
</a>
<div>xxx xxx xxx</div>
</div>

<div class="mobileBoxMain">
<a href="#">
<img src="https://www.whatmobile.com.pk/admin/images/Samsung/GalaxyS8Pluss.jpg" width="75" height="100" alt="">
Samsung Galaxy S8 Plus
</a>
<div>xxx xxx xxx</div>
</div>

<div class="mobileBoxMain">
<a href="#">
<img src="https://www.whatmobile.com.pk/admin/images/Samsung/GalaxyS8Pluss.jpg" width="75" height="100" alt="">
Samsung Galaxy S8 Plus
</a>
<div>xxx xxx xxx</div>
</div>

<div class="mobileBoxMain">
<a href="#">
<img src="https://www.whatmobile.com.pk/admin/images/Samsung/GalaxyS8Pluss.jpg" width="75" height="100" alt="">
Samsung Galaxy S8 Plus
</a>
<div>xxx xxx xxx</div>
</div>

<!-- .section --></div>

deathshadow
May 20th, 2017, 03:10 AM
in the .section class i have added "postion:relative;overflow: hidden;" and in .mobileBoxMain "position: relative;"

The overflow:hidden is what 'fixed' it for you. By default tags do not pay attention to the height of floats. Since you have float:left on .mobileBoxMain, the outer DIV was ignoring it's height. Only elements with a non-show overflow state (hidden, auto, scroll) or floats themselves will obey the height of floated elements.

Another "trick" for when overflow:hidden is an undesired behavior is to set the outer DIV to "float:left; width:100%;" since again, floats obey floats, but then you have to worry about elements AFTER that float which is why you do not see that trick used very often. Display:table can also trip float-wrapping, but is unreliable cross browser and introduces its own set of issues.

Mind you, if you care about IE6/earlier (nobody really does) overflow:hidden does NOT trigger the behavior, instead you have to create a condition called "haslayout" which tells IE to stop taking shortcuts on the math. (Shortcuts originally taken to make IE5.x the fastest browser of its time... no, that wasn't a joke. To say Netscape, Opera, and IE were horribly and inefficiently coded in the 1990's is an understatement the size of the next nearest galactic cluster). The most common layout trigger used is "zoom:1;" which is proprietary, so no other browsers pay it any mind.

Laughably to "fix" it in IE7 they didn't so much fix overflow, as they made it a "haslayout trigger"... an inelegant solution that added even more quirks and bizarroland rendering behaviors.

NOT that in 2017 you should have to care about IE6/earlier, but that REALLY depends on your traffic and topic. It DOES still come up from time to time since remember, IE6 didn't even show up on windows mobile until 2008 and a lot of businessmen who refuse to move on from their first mobile device (like our previous commander in derp with his crackberry, and our current orange cheeto fingered overlord half-tweet with his outdated no longer getting security updates Samsung Galaxy S3) just won't listen to "That thing is ten years old, you're insecure, nothing modern should work, and we developers shouldn't have to support it!"

It's also hard to tell that to a charity like a free/reduced rate mental health/family services clinic where the newest OS in the office is XP, and they still have Geode powered thin clients running Windows CE 5 as a hand-me-down (or even dumpster dives from an increasingly creative IT support staff) from the hospital and local banks. Some places pockets just don't run that deep.

Laughably in your case, people on outdated mobiles just might be your target audience if that placeholder content is any indication of the real deal! :D

In any case, your problem was float wrapping, or more specifically a lack therein. That nobody else seemed to recognize this INSTANTLY from your screenshot? [i]That's a little troubling... 99.999999% of the time you see a screenshot like that, that's the reason it's happening!

Side note, I don't see anything being done that should actually warrant relative positioning.

A.hayee
May 20th, 2017, 07:22 AM
deathshadow i didn't get you :confused: