harry_ord Posted August 20, 2017 Share Posted August 20, 2017 Hello, this is my site:http://cvkj.agencialosnavegantes.cl/servicios/ I need to do what's on the attached picture, but i'm not capable to. I do this: <div style="width:70%; float: left;"> <div > <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> </div> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-37.png" alt=""> </div> But it doesn't work, because the next title get stuck in the float:left; before it. I tried to add another div before it like this: <div style="clear:both:"></div> and it doesn't work either. What can i do? Link to comment Share on other sites More sharing options...
Sunamena Posted August 20, 2017 Share Posted August 20, 2017 You can try to assign a clear propperty. Like in this example: https://www.w3schools.com/css/css_float.asp I think the "try it" tackles a problem like the one you are having right now. If it still doesn't work, be sure to reply Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2017 Share Posted August 20, 2017 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> .test{text-align: center;} .test:before { content: ""; display: inline-block; width:0; height: 100%; } .test img {width: 97%;} </style> </head> <body> <div style="width: 960px; margin: 0px auto; overflow: hidden; vertical-align: bottom; display: flex;"> <div style="width: 70%; float: left;"> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> </div> <div class="test" style="width: 30%;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-37.png" alt=""> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
harry_ord Posted August 21, 2017 Author Share Posted August 21, 2017 Ok, now is working, thanks, dsnoesuk!http://cvkj.agencialosnavegantes.cl/servicios/ Some questions: Where's the class test used on the example? What's flex? the "overflow:hidden" part is what fixes the float:left problem? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2017 Share Posted August 21, 2017 The parent element of floated child elements, collapses to zero height, meaning the uneven height of image and text, causes the next element to float up against bottom edge of text, and stop at right edge of image. Overflow causes the parent to regain the boundary to the highest child element, causing any sibling elements not to get hooked by exposed elements, Flex is used to give equal height columns, even if the content only fills a small portion of an element, the image is vertically aligned to bottom of equal height right column. The 'test' class is used to create a textual element same height as column, this help in the image being forced to bottom of column. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now