Jump to content
harry_ord

Issue with float:left

Recommended Posts

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?

03-Servicios_VCKJ.jpg

Share this post


Link to post
Share on other sites
<!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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×