html - Floating of image float footer also -



html - Floating of image float footer also -

i have bit problem floating of image.

i have simple page, have header article, perex , image of article, in 1 container contains footer @ bottom.

i want image on left side of container, text floating around image right side, padded image few px, under header , footer should under whole thing, in container.

but when m trying float text around image, doing this.

here html:

index.html.twig

{% extends 'natalycooksblogbundle::layout.html.twig' %} {% block content %} <article class="article"> <header> <h1> header of article </h1> </header> <img class="pure-img article-image" src="{{ asset('uploads/articles/bug2.png') }}" float="right"> <p class="perex"> perex </p> </article> {% endblock %}

layout.html.twig

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="a layout illustration side menu hides on mobile, pure website."> <title>side menu &ndash; </title> <link rel="stylesheet" href="{{asset('admin/css/pure-min.css')}}"> <link rel="stylesheet" href="{{asset('frontend/style.css')}}"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <!--[if lte ie 8]> <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css"> <![endif]--> <!--[if gt ie 8]><!--> <link rel="stylesheet" href="{{asset('admin/css/layouts/side-menu.css')}}"> <!--<![endif]--> </head> <body> <div class="pure-g"> <div class="pure-u-5-5 container"> <div class="header"> </div> <center> <div class="pure-menu pure-menu-open pure-menu-horizontal"> <a href="#" class="pure-menu-heading">site title</a> <ul> <li class="pure-menu-selected"><a href="#">home</a></li> <li><a href="#">flickr</a></li> <li><a href="#">messenger</a></li> <li><a href="#">sports</a></li> <li><a href="#">finance</a></li> </ul> </div> </center> {% block content %} {% endblock %} <footer class="footer"><br>created nami production, 2014</footer> </div> </div> <script src="{{asset('admin/js/ui.js')}}"></script> </body> </html>

style.css

body { background-color: mintcream; } .container { background-color: #ffffff; margin-left: 20%; margin-right: 20%; border-bottom: none; /*margin-right: 20%;*/ } .header { width: inherit; padding-top: 30px; border-bottom: none; } .menu-center { padding-left: 12%; } .article { text-align: center; } .perex { text-align: left; padding-left: 5%; padding-right: 5%; float: right; } .article-image { padding-left: 5%; max-width: 35%; float: left; } .footer { height: 50px; background-color: greenyellow; color: #000000; font-size: 100%; text-align: center; }

add next css contentblock(there has class, tag, or id it):

.yourclass:after{ clear:both; content:''; display:block; }

html css image

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more