I can´t get the boxes where I want them

[Scorpion]

I want the IFrame on the left and the content on the right

 .content-right{
  background-color: black;
  color: white;
  margin: 20px;
  position: relative; left: 150px; top:60px; width: 100px; height:200px;
}


  .content-iframe{
  background-color: white;
  color: white;
  margin: 20px;
  position: absolute; left: 50px; top:60px; width: 30%; height:300px;
}

<div class="content">

<div class="content-iframe">

<iframe height="70%" padding="10" width="100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</iframe>

</div>

<div class="content-right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>


</div>

 

[Johna]

Try using flex on the parent element and removing the position from both child elements:

.content {
  display: flex;
}

 

[Scorpion]

Try using flex on the parent element and removing the position from both child elements:

.content {
  display: flex;
}

That worked in some way, the position is right on ff and chrome on the computer but not on the phone and i can´t move the content position in my divs, and i still don´t se the lorem ipsum in my IFrame

 

[Scorpion]

<html>
<head><meta charset="utf-8">
    <link href="/Inc/index.css" rel="stylesheet" />
    <link href="/Inc/links.css" rel="stylesheet" />

<title>Scorpion.nu</title>
</head>
<body>
    
    
<div class="banner">
<h1>Banner</h1>

<p>Plats för banner</p>
</div>

<div class="menu">
<h2>Meny</h2>
<a href="index.html">Hem</a><br />
<a href="/img/index.html">Bilder</a><br />
<a href="mail/index.html">Kontakt</a></div>

<div class="content">

<div class="content-iframe">

<iframe height="100%" padding="10" width="100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</iframe>

</div>

<div class="content-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>


</div>
</body>
</html>

.banner{
  background-color: tomato;
  color: white;
  margin: 20px;
  position: absolute; left: 5px; top:10px; width: 89%;
}

  .menu{
  background-color: tomato;
  color: black;
  margin: 20px;
  position: absolute; left: 5px; top:180px; width: 20%; height:300px;
}

  .content{
  background-color: tomato;
  color: white;
  margin: 20px;
  display: flex;
  position: absolute; left: 25%; top:180px; width: 67%; height:400px;
}

 .content-right{
  background-color: tomato;
  color: black;
  margin: 20px;
  left: 250px; top:60px; width: 500px; height:200px;
}

  .content-iframe{
  background-color: tomato;
  color: black;
  margin: 20px;
  left: 350px; top:60px; width: 100%; height:100%;
}

 

[Johna]

but not on the phone

Can you take a screenshot of what you see on a phone?

i can´t move the content position in my divs

How are you trying to move the content?

i still don´t se the lorem ipsum in my IFrame

I think what is inside an iframe only shows if iframe's aren't supported by the browser, I'm not sure. But what you want in the iframe should be a link in the src attribute:

<iframe src="https://example.com"></iframe>

If you just want a text box, use a normal p or div element, and style it with CSS, or use the textarea element with the readonly attribute.

 

[Scorpion]

got it to work, but the menu and picture are gone. It´s in swedish but it´s the link bilder
Scorpion.nu

 

[Johna]

The menu seems to be there for me. Or do you mean on mobile?

There shouldn't be any picture according to your HTML, or do you mean the iframe?

 

[Scorpion]

The menu seems to be there for me. Or do you mean on mobile?

There shouldn't be any picture according to your HTML, or do you mean the iframe?

I´ve done some changes, On the index-side, there is a problem with the placement on the right content, on the image side, the images are visible but the background color do not extend under the images