How to: text on one column, images on another, only with bootstrap divs? (float not working, absolute positioning working but text overlapping)

Question

I have to build a theme suitable for any kind of written content in html (magazine-like). I would like to layout the webpage like this: images on the left, text on the right. However, something is not working. I also need to use only bootstrap divs, no divs created for myself (because whatever html page won't use my same div classes and so on). How to do this without unnecessary divs?

I tried: - absolute positioning with left: 0 and right: 0, but it doesn't work because paragraphs overlay and there seems to be no escape from that - floats -clear, overflow...

See the code here and its troublesome outcome: https://codepen.io/dreamtheater96/pen/ZEzKNKd (I know it's messy but I'm a newbie)

p, footer { 
  font-family: 'futurabook', Fallback, sans-serif;
  background-color: white;
  color: black;
  text-transform: lowercase;
  font-size: 17px;
  text-align: justify;

  margin-right: 10px;

height: auto;


}



.col-xs-12 > p { 
  position: relative;
  width: 46%;
  background-color: pink;
float: right;
right: 0;
clear: left;
overflow: auto;   
}


.col-xs-12 > figure {
width: 46%;
position: relative;
float: left;
left: 0;
display: inline-block;
padding: 10px;  
}

I don't understand why the text can't be on the right, I figured it was too much content but remember I can not change, for any reason, the original html (so I can't put all the images on the bottom of the html, for example).

Thank you for reading!

Answer 1

Check the answer on a full page, I think that will help you.

For Bootstrap, You need to understand first the grid view system of the bootstrap. Following link will help you to study bootstrap.

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Check the output.

 p, footer { font-family: 'futurabook', Fallback, sans-serif; background-color: white; color: black; text-transform: lowercase; font-size: 17px; text-align: justify; margin-right: 10px; height: auto; } figure { width: 46%; position: relative; float: left; left: 0; display: inline-block; padding: 10px; } img { filter: grayscale(100%); opacity: 0.5; } .bg { background: #1B2CBD; } .bg img { max-width: 100%; max-height: 100%; mix-blend-mode: screen; -webkit-filter: grayscale(100%) contrast(200%); filter: grayscale(100%) contrast(200%); opacity: 0.7; } 

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <figure> <div class="bg"> <img src="images/cut_image1.jpg"> </div> <figcaption>Photo: Sergio Corvacho</figcaption> </figure> </div> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> <header> <h1>The Cut - Money</h1> <p> <time> May 28, 2018</time> </p> <h2>Maybe She Had So Much Money She Just Lost Track of It</h2> <h3>Somebody had to foot the bill for Anna Delvey&rsquo;s fabulous new life. The city was full of marks.</h3> <p>By Jessica Pressler</p> </header> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"> <figure> <div class="bg"> <img src="images/cut_image2.jpg"> </div> <div class="bg"> <img src="images/cut_image3.jpg"> </div> <figcaption><em>From left:</em>The Battery in San Francisco.<small>Photo: annadlvv/Instagram;</small> On her way to Art Basel in 2015. <small>Photo: annadlvv/Instagram</small></figcaption> </figure> </div> <div class="col-lg-5 col-md-5 col-xs-5 col-xs-5"> <p><em>I</em>t started with money, as it so often does in New York. A crisp $100 bill slipped across the smooth surface of the mid-century-inspired concierge desk at 11 Howard, the sleek new boutique hotel in Soho. Looking up, Neffatari Davis, the 25-year-old concierge, who goes by &ldquo;Neff,&rdquo; was surprised to see the cash had come from a young woman who seemed to be around her age. She had a heart-shaped face and pouty lips surrounded by a wild tangle of red hair, her eyes framed by incongruously chunky black glasses that Neff, an aspiring cinematographer with an eye for detail, identified as Céline. She was looking, she said in an accent that sounded European, for &ldquo;the best food in Soho.&rdquo;</p> <p>&ldquo;What&rsquo;s your name?&rdquo; Neff asked, after the girl waved off her suggestions of <a href="http://nymag.com/listings/restaurant/carbone/#_ga=2.130399631.1454492887.1554551844-1831093142.1554458789">Carbone</a> and the <a href="http://nymag.com/listings/restaurant/mercer-kitchen/#_ga=2.130399631.1454492887.1554551844-1831093142.1554458789">Mercer Kitchen</a> and settled on the <a href="http://nymag.com/listings/restaurant/the-butchers-daughter/#_ga=2.35428385.1454492887.1554551844-1831093142.1554458789">Butcher&rsquo;s Daughter</a>.</p> <p>&ldquo;Anna Delvey,&rdquo; said the young woman. She&rsquo;d be staying at the hotel for a month, she went on, which Neff also found surprising: Usually it was only celebrities who came for such long stretches. But Neff checked the system, and there it was. Delvey was booked into a Howard Deluxe, one of the hotel&rsquo;s midrange options, about $400 a night, with ceramic sculptures on the walls and oversize windows looking onto the bustling streets of Soho. It was February 18, 2017.</p> <p>&ldquo;Thanks,&rdquo; said Delvey. &ldquo;See you around.&rdquo;</p> <p>That turned out to be a promise. Over the next few weeks, Delvey stopped by often to ask Neff&rsquo;s advice, slipping her $100 each time. Neff would wax on about how <a href="http://nymag.com/listings/bar/mr-purple/#_ga=2.32947134.1454492887.1554551844-1831093142.1554458789">Mr. Purple</a> was totally washed and <a href="http://nymag.com/listings/bar/vandal/#_ga=2.32947134.1454492887.1554551844-1831093142.1554458789">Vandal</a> was for hipsters, while Delvey&rsquo;s eyes would flit around behind her glasses. Eventually, Neff realized: Delvey already <em>knew</em> all the cool places to go — not only that, she knew the names of the bartenders and waiters and owners. &ldquo;This is not a guest that needs my <em>help</em>,&rdquo; it dawned on her. &ldquo;This is a guest that wants my <em>time</em>.&rdquo;</p> <p>This was not out of the ordinary. Since she&rsquo;d started working there, Neff, a Washington, DC, native with a wedge of natural hair, giant Margaret Keane eyes, and a gap-toothed smile, had found herself playing therapist to all manner of hotel guests: husbands cheating on their wives, wives getting away from their husbands. &ldquo;You just sit there and listen, because that&rsquo;s your concierge life,&rdquo; she recalled recently, at a coffee shop near her apartment in Crown Heights.</p> <p>Usually, these guests went back to their own lives, leaving Neff to hers. But February became March, and Delvey kept showing up. She&rsquo;d bring food down, or a glass of extra-dry white wine, and settle near Neff&rsquo;s desk to chat. Some of the other hotel employees found Anna deeply annoying. She could be oddly ill-mannered for a rich person: <em>Please</em> and <em>thank you</em> were not in her vocabulary, and she would sometimes say things that were &ldquo;Not <em>racist</em>,&rdquo; Neff said, &ldquo;but <em>classist</em>.&rdquo; (&ldquo;What are you bitches, broke?&rdquo; Anna asked her and another hotel employee.) But to Neff, it didn&rsquo;t come across as mean-spirited. More like she was some kind of old-fashioned princess who&rsquo;d been plucked from an ancient European castle and deposited in the modern world, although according to Anna she came from modern-day Germany and her father ran a business producing solar panels. And despite her unassuming figure — &ldquo;a sort of <em>Sound of Music</em> Fräulein,&rdquo; one acquaintance later put it — Anna quickly established herself as one of 11 Howard&rsquo;s most generous guests. &ldquo;People would fight to take her packages upstairs,&rdquo; said Neff. &ldquo;<em>Fight</em>, because you knew you were getting $100.&rdquo; Over time, Delvey got more and more comfortable in the hotel, swanning around in sheer Alexander Wang leggings or, occasionally, a hotel robe. &ldquo;She <em>ran</em> that place,&rdquo; said Neff. &ldquo;You know how Rihanna walks out with wineglasses? That was Anna. And they let her. <em>Bye, Ms. Delvey</em> …&rdquo;</p> <p>Anna was preparing to launch a business, a Soho House–ish type club, she told Neff, focused on art, with locations in LA, London, Hong Kong, and Dubai, and Neff became her de facto secretary, organizing business lunches and dinners at restaurants like Seamore&rsquo;s and the hotel&rsquo;s own Le Coucou. (&ldquo;That&rsquo;s what they do in the rich culture, is meals,&rdquo; said Neff.) On occasion, when Delvey showed up while the concierge desk was busy, she would stand at the counter, coolly counting out bills until she got Neff&rsquo;s attention. &ldquo;I&rsquo;d be like, &lsquo;Anna, there&rsquo;sa line of eight people.&rsquo; But she&rsquo;d keep putting money down.&rdquo; And even though Neff had begun to think of Anna as not just a hotel guest but a friend, <em>a real friend</em>, she didn&rsquo;t hesitate to take it. &ldquo;A little selfish of me,&rdquo; she admitted later. &ldquo;But … yeah.&rdquo;</p> <p>Who can blame her? This was Manhattan in the 21st century, and money is more powerful than ever. Rare is the city dweller who, when presented with an opportunity for a sudden and unexpected influx of cash, doesn&rsquo;t grasp for it. Of course, this money almost always comes with strings attached. Sometimes you can barely see them, like that vaudeville bit in which the pawn dives for a loose bill only to find it pulled just ahead. Still, everyone makes the reach. Because here, money is the one thing that no one can ever have enough of.</p> </div> </div> </div> 

Answer 2

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

after basic understanding of grid system, you can practice using bootstrap templates.

https://www.w3schools.com/bootstrap/bootstrap_templates.asp