html - Images are not floating up -


i trying float row of 4 images. however, not floating. attach code , screenshot of website locally hosted. have tried putting float in other parts of css such in #sidebar{float:left;}. not sure why not float. have tried .left{float:left} makes sidebar smaller. confused this.

/* ----- fonts css ----- */    body {    font-family: 'comfortaa', cursive, sans-serif;    margin: 0;    padding: 0;  }      /* ----- end fonts css ----- */    .indexbody {    width: 100%;    background-image: url("city.jpg");    color: #fff;  }    #textlogo {    text-align: center;    font-size: 46px;  }      /*---- index page ----*/    .servicetitle {    float: left;    width: 49%;    text-align: center;    margin-bottom: 0;  }    .serviceimage {    float: left;    margin-left: 4.5%;    margin-bottom: 9%;    margin-top: 3%;    width: 600px;  }    .serviceimage:hover {    background-image: url("img_3134.jpg");  }    .clearfix {    clear: both;  }    footer {    color: #fff;    font-size: 24px;    text-align: center;  }      /*---- photograohy portfolio index page ----*/    nav ul {    width: 75%;  }    nav ul li {    list-style-type: none;    font-size: 34px;    color: #fff;    text-align: center;    padding: 15px;    border-bottom: 2px solid black;  }    nav ul li {    text-decoration: none;    color: black;  }    nav ul li a:hover {    color: blue;  }    .col1 {    float: left;    width: 35%;  }    .photobody {    margin: 0;    background-color: #fff;  }    #sidebar {    width: 20%;  }    .navigation {    background-color: #fff;    width: 100%;    height: 100%;  }    #photoglogo {    text-align: center;    font-size: 46px;    color: black;    margin-top: 0;  }    .main1 {    width: 70%;    clear: both;  }    .row1 {    float: left;    width: 20%;    padding: 3px;    margin: 1%;    border: 2px solid black;  }      /*test*/    .right {    float: right;  }
<body class="photobody">    <div class="left">      <div id="sidebar">        <div class="navigation">          <h1 id="photoglogo">text logo</h1>          <nav>            <ul>              <li><a href="#">home</a></li>              <li><a href="#">about</a></li>              <li><a href="#">portfolio</a></li>              <li><a href="#">services</a></li>              <li><a href="#">contact</a></li>            </ul>          </nav>        </div>      </div>    </div>    <div class="right">      <div class="main1">        <img class="row1" src="img_4085.jpg" alt="coastline" />        <img class="row1" src="img_4085.jpg" alt="coastline" />        <img class="row1" src="img_4085.jpg" alt="coastline" />        <img class="row1" src="img_4085.jpg" alt="coastline" />      </div>    </div>  </body>

this image screenshot of website

if understand want, way : 

 .main1{     width: 35%;     clear: both; }  .row1{     display:block;     left:0;     float:left;     width: 100%;      padding: 3px;     margin: 1%;     border: 2px solid black; }

fiddle here


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more