CSS dua div di sebelah satu sama lain

Saya ingin menempatkan dua <div>s di samping satu sama lain. Kanan <div>adalah tentang 200px; dan kiri <div>harus mengisi sisa lebar layar? Bagaimana saya bisa melakukan ini?

Anda dapat menggunakan flexbox untuk meletakkan item Anda:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Ini pada dasarnya hanya menggores permukaan flexbox. Flexbox dapat melakukan hal-hal yang sangat menakjubkan.

Untuk dukungan browser yang lebih lama, Anda dapat menggunakan CSS float dan properti width untuk menyelesaikannya.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Saya tidak tahu apakah ini masih merupakan masalah saat ini atau tidak, tetapi saya hanya mengalami masalah yang sama dan menggunakan display: inline-block;tag CSS . Membungkus ini dalam div sehingga mereka dapat diposisikan dengan tepat.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Perhatikan bahwa penggunaan atribut style inline hanya digunakan untuk ringkasnya contoh ini tentu saja ini digunakan untuk dipindahkan ke file CSS eksternal.

Sayangnya, ini bukan hal sepele untuk dipecahkan untuk kasus umum. Cara termudah adalah menambahkan properti bergaya css "float: right;" ke div 200px Anda, bagaimanapun, ini juga akan menyebabkan "utama" -div Anda benar-benar menjadi lebar penuh dan teks apa pun di sana akan melayang di sekitar tepi 200px-div, yang sering terlihat aneh, tergantung pada konten (cukup banyak dalam semua kasus kecuali jika itu adalah gambar mengambang).

EDIT: Seperti yang disarankan oleh Dom, masalah pembungkus tentu saja dapat diselesaikan dengan margin. Saya konyol.

Metode yang disarankan oleh @roe dan @MohitNanda berfungsi, tetapi jika div yang tepat ditetapkan sebagai float:right;, maka itu harus didahulukan di sumber HTML. Ini memecah urutan baca kiri-ke-kanan, yang bisa membingungkan jika halaman ditampilkan dengan gaya dimatikan. Jika itu masalahnya, mungkin lebih baik menggunakan div pembungkus dan penentuan posisi absolut:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Diperagakan:

Sunting: Hmm, menarik. Jendela pratinjau menampilkan div yang diformat dengan benar, tetapi item kiriman yang diberikan tidak. Maaf, Anda harus mencobanya sendiri.

Saya mengalami masalah ini hari ini. Berdasarkan solusi di atas, ini bekerja untuk saya:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Cukup buat div induk merentang lebar penuh dan mengapung div yang terkandung di dalamnya.

MEMPERBARUI

Jika Anda perlu menempatkan elemen dalam satu baris, Anda dapat menggunakan Layout Flex . Di sini Anda memiliki tutorial Flex lainnya . Ini adalah alat CSS yang luar biasa dan meskipun tidak 100% kompatibel, setiap hari dukungannya semakin baik. Ini bekerja sesederhana:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

Dan yang Anda dapatkan di sini adalah sebuah wadah dengan ukuran total 4 unit, yang berbagi ruang dengan anak-anaknya dalam hubungan 1/4 dan 3/4.

Saya telah melakukan contoh di CodePen yang memecahkan masalah Anda. Saya harap ini membantu.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

SANGAT TUA

Mungkin ini hanya omong kosong, tetapi apakah Anda sudah mencoba dengan meja? Itu tidak menggunakan langsung CSS untuk memposisikan divs, tetapi berfungsi dengan baik.

Anda bisa membuat tabel 1x2 dan memasukkan divsbagian dalamnya, lalu memformat tabel dengan CSS untuk menempatkannya seperti yang Anda inginkan:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Catatan

Jika Anda ingin menghindari menggunakan tabel, seperti yang dikatakan sebelumnya, Anda dapat menggunakan float: left;dan float: right;dan di elemen berikut, jangan lupa untuk menambahkan clear: left;, clear: right;atau clear: both;agar posisinya dibersihkan.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Ini akan berfungsi OK selama Anda mengatur clear: bothelemen yang memisahkan dua blok kolom ini.

Saya mengalami masalah yang sama dan versi Mohits berfungsi. Jika Anda ingin menjaga urutan kiri-kanan Anda di html, coba saja ini. Dalam kasus saya, div kiri menyesuaikan ukuran, div kanan tetap pada lebar 260px.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

Caranya adalah dengan menggunakan bantalan kanan di kotak utama tetapi gunakan ruang itu lagi dengan menempatkan kotak kanan lagi dengan margin-kanan.

Saya menggunakan campuran float dan overflow-x: hidden. Kode minimal, selalu berfungsi.

https://jsfiddle.net/9934sc4d/4/ - PLUS Anda tidak perlu menghapus float Anda!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Seperti yang semua orang tunjukkan, Anda akan melakukan ini dengan menetapkan float:right;pada konten RHS dan margin negatif pada LHS.

Namun .. jika Anda tidak menggunakan float: left;LHS (seperti yang dilakukan Mohit) maka Anda akan mendapatkan efek loncatan karena LHS div masih akan menggunakan ruang margin'd di tata letak.

Namun .. float LHS akan menyusut-membungkus konten, jadi Anda harus memasukkan childnode lebar yang ditentukan jika itu tidak dapat diterima, pada titik mana Anda juga dapat menentukan lebar pada induk.

Namun .. seperti yang ditunjukkan David, Anda dapat mengubah urutan baca markup untuk menghindari persyaratan float LHS, tetapi itu memiliki keterbacaan dan kemungkinan masalah aksesibilitas.

Namun .. masalah ini dapat diselesaikan dengan pelampung yang diberi beberapa markup tambahan

(peringatan: Saya tidak menyetujui div .clearing pada contoh itu, lihat di sini untuk detail)

Semua hal dipertimbangkan, saya pikir sebagian besar dari kita berharap ada lebar non-serakah: tersisa di CSS3 ...

Ini tidak akan menjadi jawaban untuk semua orang, karena tidak didukung di IE7-, tetapi Anda dapat menggunakannya dan kemudian menggunakan jawaban alternatif untuk IE7-. Ini adalah display: table, display: table-row dan display: table-cell. Perhatikan bahwa ini bukan menggunakan tabel untuk tata letak, tetapi tata letak divs sehingga semuanya sesuai dengan baik tanpa semua kerumitan dari atas. Milik saya adalah aplikasi html5, jadi itu berfungsi dengan baik.

Artikel ini menunjukkan contoh: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

Berikut ini tampilan stylesheet Anda:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Mengutip salah satu situs web saya yang melakukan hal serupa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

cukup gunakan z-index dan semuanya akan bagus. pastikan posisi ditandai sebagai tetap atau absolut. maka tidak ada yang akan bergerak seperti dengan tag float.