Divs på samme linje, selv på liten skjerm?

clinton4

clinton4

Medlem
Hei,

Hvordan får jeg to divs (250px og 900px) på samme linje, selv om skjermoppløsningen til den besøkende er mindre en 1150px ?
 
H

Hanse

New Member
Ha float:left; på venstre-diven. Dersom du ønsker at divene skal resizes kan du ekseperimentere med max-width eller @media-queries.
 
adeneo

adeneo

Medlem
Både floats og display inline(-block) vil føre til at elementet lengst til høyre faller ned på linjen under når skjermen blir for liten. For å unngå det må du bruke en "container / wrapper" som er like bred som begge elementet og som ikke påvirkes av skjermstørrelsen (absolute).

TEST
 
Sist redigert:
H

Hanse

New Member
Kode: 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>JS Bin</title>
  <style>
    .first {
      float: left;
      width: 250px;
      background: red;
    }
    .second {
      width: 900px;
      background: yellow;
      margin-left: 250px;
    }
  </style>
</head>
<body>
  <div class="first">Hello</div>
  <div class="second">World</div>
</body>
</html>
 
adeneo

adeneo

Medlem
Eller du kan jukse med marginer
huge-thumbs-up-smiley-emoticon.gif
 
clinton4

clinton4

Medlem
adeneo skrev:
Både floats og display inline(-block) vil føre til at elementet lengst til høyre faller ned på linjen under når skjermen blir for liten. For å unngå det må du bruke en "container / wrapper" som er like bred som begge elementet og som ikke påvirkes av skjermstørrelsen (absolute).

TEST
Klikk for å utvide...

Var det som var problemet, divene lå i en wrapper med 100% width. Takk! :)
 
Du må logge inn eller registrere deg for å svare her.
Topp