CSS - Positioning one element around another. To float around each other

Question

I'm building an events site and working on the index page styling. My plan is to have a site logo and sign-in / create event link sat perfectly central at the top of the page and for each event represented by a box shape image with date/title sat on top of it as a link through to more event details. I've pretty much got everything done except I can't get the image links to float/position around the logo. I've attached a screenshot below to illustrate how it currently looks. I want the event images to filter along the side of the logo rather than how it looks now with blank space on either side of the logo.

Here's my code -

index.html.erb

    <div class="category">
        <ul>
            <li>
                <a href="#">Categories</a>  
                <ul>
                        <% Category.all.each do |category| %>
                                <li><a href="#"><%= link_to category.name, events_path(category: category.name) %></a></li>
                            <% end %>
                        <!-- The code loop above creates category links to the home page -->
                </ul>
            </li>
        </ul>
    </div>

 </nav>     


<div id="logosignin">

    <% if user_signed_in? %>
                <%= image_tag('MamaKnowsLogo.jpg') %>
                <li><%= link_to 'Create Event', new_event_path %></li>
                <li><%= link_to 'Profile', user_path(current_user) %></li>

    <% else %>
                <%= image_tag('MamaKnowsLogo.jpg') %>
                <li><%= link_to 'Sign in', new_user_session_path %></li>
    <% end %>
</div>



<div class="container">
<div class="row">
    <div class="col-md-12">
        <ul>

                <% @events.each do |event| %>
            <li class="events"> 
                    <%= link_to (image_tag event.image.url), event, id: "image" %>
                <div class="text">  
                    <h2><%= link_to event.title, event %></h2>
                    <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3>
            </li>       
                <% end %>
                </div>

        </ul>                           
    </div>
</div>  

And the relevant CSS.

events.css.scss -

div.container {
width: 100%;

}   



.col-md-12 { 

width: 100%;


}    

li.events { 
width: 350px; 
height: 350px; 
float: left;
margin: 20px;
list-style-type: none;
position: relative; 

}

li.events img { 
width: 100%; 
height: 100%; 
border-radius: 25px;




}

   #logosignin img {
width: 250px;
height: auto;
margin: 0 auto;


 }

 #logosignin {
width: 250px;
height: 350px;
margin: 0 auto;


 }

 #logosignin a {
text-decoration: none;
color: #FFFFFF;
padding: 7px;
border-radius: 15px;
background-color: #FF69B4;




 }

 #eventnav {
height: 75px;
 }

#logosignin li {
bottom: 30px;

list-style: none;
display: block;
margin: 0 auto;
text-align: center;
}

Do I need to set the div for the logo within the div for the events? Any assistance would be appreciated.

Answer 1

Well you create a new container for the events, in a new row, within a div that spreads across the 12 columns on all screen sizes.

You can have more details here , but rows in Bootstrap (I assume you use Bootstrap) are used to create horizontal groups of columns. Then inside your row, you can create elements of different widths using col-* (the container is divided in 12 columns).

What you can do is nest your logosignin inside your row div and play with col-* to achieve the look you want on all screens. You might want to check how to clearfix columns that are higher than others on small screens (see here ).